如何设置这个选择元素的样式？

Question

这是我第一次尝试将PSD转换为HTML。

下面是我需要转换的select元素的屏幕截图。

我尝试使用Bootstrap 3.0.3，结果如下：

任何人都可以帮助我？

以下是我的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>

Answer 1

这是个主意， 您需要取消显示下拉箭头并通过自定义图像替换它。

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

Answer 2

您可以使用CSS执行此操作，但它不适用于IE＆lt; 9。参见：

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

Answer 3

使用三个'col-md-2'类将<div class="col-md-6">分为3部分，例如： - '<div class="col-md-2">'

<强>代码： -

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