如何设置这个select元素的样式？ [英] How to style this select element?

问题描述

这是我第一次尝试将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 =textplaceholder =拾取位置class =form-control input-lgid =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 =textplaceholder =Destinationclass =form-control input-lgid =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 =textplaceholder =DD / MMclass =form-control input-lgid =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> 
  

解决方案

  .input-group select {
 background：url（http://www.invlocate.com/assets/images/arrow-10x10.gif）no-重复右5％底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; 
} 
  

这是一个指向示例的链接

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 :

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>

解决方案

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

这篇关于如何设置这个select元素的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！