Tengo campos de entrada y etiqueta:
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 se abre el código en Firefox, las fonts no son lo mismo. 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 lo que está sucediendo y por qué no parece obedecer las reglas CSS normales?
Judy
No hereda por defecto, pero puede configurarlo para heredar con css
input, select, textarea, button{font-family:inherit;}
Los elementos de formulario (inputs / textarea / etc) no heredan información de fuente. Deberá configurar la familia de fonts en esos elementos.
Tres años después, me parece extraño que elementos de de los tipos reset , submit y button no hereden font-family en Chrome o Safari. Descubrí que tampoco recibirían relleno.
Pero cuando me meto con ciertas propiedades, como el background , el border o esta extraña propiedad de appearance , la font-family y el padding tienen efecto, pero se pierde la apariencia y el tacto nativos del botón, lo cual no es un problema si estás restyling completamente los botones.
Si desea un botón de búsqueda nativo, con font-family heredada, use el elemento lugar de .
Ver Codepen .
He tenido 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.