Como posso alterar o tamanho da fonte de uma opção seleccionada?
Estou a tentar estilizar uma lista suspensa de opções seleccionadas. É possível tornar os tamanhos das fontes das opções diferentes do valor padrão? Por exemplo, o valor padrão:
-- Select Country --
Seria o tamanho 7pt; e uma das opções,
Georgia
Seria o tamanho 13pt.
Esta é a minha lista suspensa:
.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>
Veja também a minha [demonstração no JSFiddle](http://jsfiddle.net/VggvD/50/).
Infelizmente, só funciona no Firefox. Será que os outros navegadores don't suportam o estilo de <option>
elementos?
Navegadores em que testei:
- Cromado: Versão 27.0.1453.116 m
- IE: 10
- Firefox: 22.0
16
3
Adicione uma classe CSS à tag `` para dar estilo a ela: [http://jsfiddle.net/Ahreu/](http://jsfiddle.net/Ahreu/50/)
Atualmente os navegadores do WebKit não suportam esse comportamento, pois ele'é indefinido pelas especificações. Dê uma olhada nisto: Como estilizar um elemento de opção select tag's?
Diga ao elemento de opção para ser 13pt
e depois o primeiro elemento de opção a ser 7pt
Rodando demo: http://jsfiddle.net/VggvD/1/
experimente isto
http://jsfiddle.net/VggvD/2/
CSS adicione o seu código