Cómo cambiar el tamaño de fuente de la lista (no la vista inicial)
He establecido una fuente y un fondo personalizados para la vista inicial de la lista desplegable (Seleccione una opción). losfont-size
Tiene 20 píxeles y se ve muy bien con la fuente personalizada. Sin embargo, cuando hago clic en la lista, las opciones en sí mismas no usan la fuente personalizada y se ven normales, excepto en el caso defont-size
, lo que parece llevarse encima. Este solo parece ser el caso de Chrome (también he probado Safari y Firefox).
@font-face {
font-family: 'Averia Libre';
font-style: normal;
font-weight: 400;
src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
select {
font-size: 20px;
font-family: 'Averia Libre', cursive;
background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x;
width: 400px;
font-family: 'Averia Libre';
}
<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<select>
<option value="">I'm a custom font.</option>
<option value="">Hey me too!</option>
<option value="">Averia Libre</option>
</select>
Intenté crear una clase separada para las opciones en sí mismas, pero eso no pareció tener ningún efecto.
Para ilustrar más a fondo, aquí hay unaJSFiddle.
Cromo:
Firefox: