Выберите выпадающий встроенный текст ярлыка

Question

Я хочу вставить ярлык внутри раскрывающегося списка.

Здесь Продажа в текст этикетки и США является один из вариантов в раскрывающемся меню. Каков наилучший способ реализации этого. Я чувствую, что мне придется написать настраиваемое раскрывающееся меню.

Answer 1

Сделать <select> обнаженный

* {font-family: 'Segoe UI'; font-size: 10pt;} 
 
select {border: none; color: #666;}

<label> 
 
    <span>Sell in</span> 
 
    <select> 
 
    <option>United States</option> 
 
    </select> 
 
</label>

Answer 2

Да. родной <select> тег не принимает улучшений или усовершенствованного стиля. Вы можете попробовать с помощью плагинов, как выбрать или Выбор2 из JQuery плагин реестра

• Chosen
• Select2

Answer 3

вы имели в виду что-то вроде этого? http://jsfiddle.net/rw6d2r25/6/

select { 
 
    padding-left:65px; 
 
    height:40px; 
 
    position:relative; 
 
    border:1px solid #333; 
 
    width:300px; 
 
    display:block; 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    -o-appearance: none; 
 
    -ms-appearance: none; 
 
    border-radius: 0; 
 
    -webkit-box-shadow: none; 
 
} 
 
label { 
 
    position:absolute; 
 
    z-index:1; 
 
    height:40px; 
 
    line-height:40px; 
 
    pointer-events:none; 
 
    text-indent:10px; 
 
    font-weight:bold; 
 
} 
 
label, select { 
 
    font-family:Arial; 
 
    font-size:15px; 
 
}

<label>Sell In:</label> 
 
<select> 
 
    <option>United States</option> 
 
    <option>United AE</option> 
 
</select>