¿Por qué hereda la fuente del cuerpo?

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;} 

demo: http://jsfiddle.net/gaby/pEedc/1/

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.