如何設計這個select元素？

Question

這是我第一次嘗試將PSD轉換爲HTML。

下面是我需要轉換的select元素的屏幕截圖。

我試着用引導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 < 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>