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

【问题标题】：How to style this select element?如何设置这个选择元素的样式？
【发布时间】：2014-02-05 11:10:56
【问题描述】：

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

下面是我需要转换的选择元素的截图。

我尝试使用 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>

【问题讨论】：

搜索一个花哨的select jquery插件
试试这样的组件：ivaynberg.github.io/select2 然后你应该能够按照你需要的方式设置它的样式。
@hunter 不能用纯css实现结果？
通过设置select 标签的样式，您将无法准确获得您想要的结果。使用上面提到的一些组件会给你更多的 CSS 控制。
@hunter 明白了。也许改为 div ？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

只需使用三个 'col-md-2' 类例如：-'<div class="col-md-2">'

将您的 <div class="col-md-6"> 分成 3 部分

代码：-

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

【讨论】：

只需将替换为

【解决方案2】：

你可以用 CSS 做到这一点，但它不适用于 IE

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

【讨论】：

【解决方案3】：

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

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

【讨论】：