<input> no hereda la fuente de <body>

102

Tengo campos de entrada y etiqueta:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

y CSS:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

Cuando el código se abre en Firefox, las fuentes no son las mismas. Firebug muestra que ambos "deberían" heredar y cuando miro calculado, muestra que la etiqueta usa Verdana. Sin embargo, la entrada muestra que usa "MS Shell Dlg".

¿Alguien puede explicar qué está sucediendo y por qué no parece obedecer las reglas normales de CSS?

css Judy R
fuente
es muy triste que no lo hagan. Supongo que el W3C había decidido que sería mejor dejarlos con el estilo predeterminado del sistema en lugar de forzarles su propio estilo de
broswer

Respuestas:

125

No hereda de forma predeterminada, pero puede configurarlo para heredar con css

input, select, textarea, button{font-family:inherit;}

demostración: http://jsfiddle.net/gaby/pEedc/1/

Gabriele Petrioli
fuente
propiedad de fuente hereda automáticamente si no se menciona, consulte aquí: developer.mozilla.org/en/CSS/font
diEcho
4
@diEcho, esto es cierto para todos los elementos además de los elementos de formulario, que heredan del estilo del sistema actual, por lo que mantienen una sensación familiar para el usuario ( por defecto ), pero se pueden anular manualmente.
Gabriele Petrioli
1
Incorrecto o no, lo que Firebug me estaba mostrando era muy confuso: tamaño de fuente 12, pero calculó que todavía se convirtió en 13,3333. Después de configurar el tamaño de fuente para heredar de manera análoga a la respuesta de Gaby, mi problema se resolvió: O
Jeroen
@Gaby Siempre es tan bueno que los diseñadores piensen todo por nosotros, los desarrolladores ...;)
AGuyCalledGerald
Además, si coloca el inputinterior label, la labeletiqueta no hereda el CSS predeterminado
AmerllicA
16

Los elementos de formulario (entradas / área de texto / etc.) no heredan información de fuente. Deberá establecer la familia de fuentes en esos elementos.

John Green
fuente
@jhon wat alguna vez dices que puede ser cierto, ¿hay algún documento estándar / válido con respecto a esto?
diEcho
Los elementos de fuente tampoco heredan el color, el fondo, etc. ¡En realidad, los elementos de fuente son lo menos confiable en todo el html / css! No puede especificar un ancho para un cuadro de entrada y la garantía será la misma en todos los navegadores.
Ionuț Staicu
Me refiero a elementos de forma. Todavía con sueño :)
Ionuț Staicu
@diEcho - Honestamente, hice una búsqueda a través de las especificaciones y no veo que se llame en ninguna parte. Mirando 'Relacionado', y SO me está dando un enlace de pregunta duplicado: stackoverflow.com/questions/2874813 (que da mi respuesta, aunque también sin enlaces de especificaciones). La hoja de estilo predeterminada en Chrome enumera la fuente como "-webkit-small-control;", lo que significa que ya está anulando el cuerpo, por lo tanto, es más específica que cualquier cosa establecida en el cuerpo. Lo mismo ocurre con los elementos TD, si no me equivoco. Así que no sé qué decir más que "así es como es". :)
John Green
5

Tres años más tarde, se me hace extraños <input>elementos de tipos reset, submity buttonno heredan font-familyen Chrome o Safari. Descubrí que tampoco recibirían relleno.

Pero cuando me meto con ciertas propiedades, como background, bordero esta appearancepropiedad extraña , entonces font-familyy paddingtiene efecto, pero se pierde la apariencia nativa del botón, lo cual no es un problema si está rediseñando completamente los botones.

Si desea un botón de aspecto nativo, con heredado font-family, use el <button>elemento en lugar de <input>.

Ver Codepen .

Stoutie
fuente
1

Tuve el mismo problema. Lo que funcionó para mí fue agregar el estilo directamente al elemento de entrada en el html. Estoy codificando en React fyi.

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

rpd1297
fuente