Как я могу изменить размер шрифта для опции выбора? [Дубликат]
На этот вопрос уже есть ответ:
Как стилизовать элемент option выбранного тега? 5 ответовЯ пытаюсь оформить выпадающий список опций выбора. Можно ли сделать размеры шрифта опций отличными от значения по умолчанию? Например, по умолчанию:
-- Select Country --
Должен быть размером 7pt; и один из вариантов,
Georgia
Будет 13pt.
Это мой выпадающий список:
.select_join {
width: 170px;
height: 28px;
overflow: hidden;
background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
border: #FEFEFE 1px solid;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
background: transparent;
width: 170px;
font-size:7pt;
color:grey;
border: 0;
border-radius: 0;
height: 28px;
-webkit-appearance: none;
}
.select_join select:focus {
outline: none;
}
<div style="background-color:pink;height:150px; text-align:center;">
<br/>
<div class="select_join" style="margin-left:15px">
<select name="txtCountry">
<option>-- Select Country --</option>
<option value="1">Georgia</option>
<option value="2">Afghanistan</option>
</select>
</div>
</div>
Смотрите также мой демо на JSFiddle.
К сожалению, это работает только в Firefox. Может быть, другие браузеры не поддерживают стилизацию<option>
элементы?
Браузеры, на которых я тестировал:
Chrome: версия 27.0.1453.116 мIE: 10 Firefox: 22,0