How to style this select element?

Question

This is my first attempt to convert PSD to HTML.

Below is screenshot of the the select element that I need to convert.

actual design

I tried using Bootstrap 3.0.3 and below is the result :

result

Anyone can help me?

Below is my HTML

<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>
                <select class="form-control">
                    <option>
                        hr
                    </option>
                </select>
                <select class="form-control">
                    <option>
                        min
                    </option>
                </select>
                <select class="form-control">
                    <option>
                        AM
                    </option>
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            &nbsp;
        </div>
    </div>
</form>

Try a component like this: http://ivaynberg.github.io/select2/ Then you should be able to style it the way you need it to be. — hunter, Jan 16 '14 at 13:51
You won't be able to get exactly what you're going for by styling a `select` tag. Using some component like the one mentioned will give you more css control. — hunter, Jan 16 '14 at 14:04
If you check out that plugin it doesn't require that you change any of your existing `select` code. It hides that element and maintains its state. It replaces the viewable element with one that you are able to style. — hunter, Jan 16 '14 at 14:06

score 1 · Answer 1 · answered Jan 16 '14 at 13:58

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

score 0 · Answer 2 · answered Jan 16 '14 at 14:00

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;
}

score 0 · Answer 3 · answered Jan 16 '14 at 14:04

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>

How to style this select element?

3 Answers3

Linked