Как стилизовать этот элемент?

Это моя первая попытка конвертировать PSD в HTML.Как стилизовать этот элемент?

Ниже приведен снимок экрана для элемента select, который мне нужно преобразовать.

actual design

Я попытался с помощью Bootstrap 3.0.3 и ниже результат:

result

Любой человек может мне помочь?

Ниже мой 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>

источник

2014-01-16 skycrew

Поиск фантазии выбора JQuery plugin –

Попробуйте использовать такой компонент: http://ivaynberg.github.io/select2/ Тогда вы должны уметь стилизовать его так, как вам нужно. – hunter

@hunter не может использовать чистый css для достижения результата? – skycrew

Вот идея, Вы должны undisplay на стрелку раскрывающегося списка и заменить его с помощью пользовательского образа.

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

источник

2014-01-16 13:58:43 Romain

Вы можете сделать это с помощью 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; 
}

источник

2014-01-16 14:00:17

Мне нужен кросс-браузер совместимый и, конечно, отзывчивый – skycrew

Попробуйте Combobox http://jqueryui.com/autocomplete/#combobox или –

Просто разделите <div class="col-md-6"> в 3 части с помощью трех 'Col-мкр-2' класса, например: - '<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>

источник

2014-01-16 14:04:08

, но его невозможно получить точно так же, как дизайн? – skycrew

Просто замените на это

Как стилизовать этот элемент?

ответ