Estoy tratando de dar estilo a una lista desplegable de opciones de selección. ¿Es posible hacer que el tamaño de las fuentes de las opciones sea diferente del valor por defecto? Por ejemplo, el valor por defecto:
-- Select Country --
sería el tamaño 7pt; y una de las opciones,
Georgia
sería de tamaño 13pt.
Esta es mi lista desplegable:
-- Comienza el snippet: js hide: false -->
.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>
...fin del fragmento..;
Véase también mi [demo en JSFiddle](
).Por desgracia, sólo funciona en Firefox. ¿Podría ser que otros navegadores no soporten el estilo de los elementos <option>
?
Navegadores en los que he probado:
Añade una clase CSS a la etiqueta <option>
para darle estilo: [
Actualmente los navegadores WebKit no soportan este comportamiento, ya que no está definido por la especificación. Echa un vistazo a esto: ¿Cómo estilizar un elemento de opción de la etiqueta select's?
prueba esto
CSS añadir su código
.select_join option{
font-size:13px;
}