How To Style This Select Element?

This is my first attempt to convert PSD to HTML. Below is screenshot of the the select element that I need to convert. I tried using Bootstrap 3.0.3 and below is the result : Any

Solution 1:

Here is the idea, You need to undisplay the drop-down arrow and replace it via a custom image.

CSS

.input-group select {
    background: url("http://www.invlocate.com/assets/images/arrow-10x10.gif") no-repeat right 5% bottom 40% #000;
    width: 20%;
    font-family: 'Open Sans', sans-serif;
    font-size: .25em;
    line-height: 10px;
    color: #FFF;
    padding: 1% 15% 1% 4%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #fff;
    -webkit-appearance: none;
}

Here is a link to an example

Solution 2:

You can do this with CSS, but it not work on IE<9. See:

http://jsfiddle.net/rwcZU/

CSS:

select{
    height: 30px;
    width: 150px;
    margin-top: 5px;
    border: solid 1px #e0e0e0;
    background: url('http://veja0.abrilm.com.br/images/arrow-finances-down.png') no-repeat right center;
    -o-appearance: none;
    -ms-appearance: none;
    -moz-appearance: checkbox-container;
    -khtml-appearance: none;
    -webkit-appearance: none;
}

Solution 3:

Just divide your <div class="col-md-6"> into 3 part by using three 'col-md-2' class eg:-'<div class="col-md-2">'

Code:-

<form id="bookingForm">
    <div class="row">
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <img src="/media/img/pointA-grey.png" />
                </span>
                <input type="text" placeholder="Pick up location" class="form-control input-lg" id="fromLoc" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <img src="/media/img/pointB-grey.png" />
                </span>
                <input type="text" placeholder="Destination" class="form-control input-lg" id="toLoc" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            &nbsp;
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <img src="/media/img/calendar-grey.png" />
                </span>
                <input type="text" placeholder="DD/MM" class="form-control input-lg" id="calBooking" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <img src="/media/img/clock-grey.png" />
                </span>
                <div class="col-md-2">
                <select class="form-control">
                    <option>
                        hr
                    </option>
                </select>
                </div>
                <div class="col-md-2">
                <select class="form-control">
                    <option>
                        min
                    </option>
                </select>
                </div>
                <div class="col-md-2">
                <select class="form-control">
                    <option>
                        AM
                    </option>
                </select>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            &nbsp;
        </div>
    </div>
</form>