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:-

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