¿La familia de fuentes no se hereda en los campos de entrada del formulario?

Question

¿Los elementos de entrada de formulario html, como el campo de texto de entrada o el cuadro de selección, no heredan automáticamente la propiedad de la familia de fuentes del cuerpo? Por ejemplo:

body { 
font-family:'Lucida Casual', 'Comic Sans MS'; 
} 

No va a utilizar la fuente más arriba en el campo de formulario de entrada a continuación:

<form> 
    <div> 
     <label for="name">Name</label> 
     <input id="name" name="name" type="text" /> 

    <div> 
</form> 

Por favor, echar un vistazo a http://jsfiddle.net/3fkNJ/

¿Es común que tenemos que volver -definir la familia de fuentes para los campos de entrada, ¿o estoy haciendo algo mal?

Answer 1

Sí, debe colocar el font en la etiqueta input.

.input{ 
padding:5px; 
font-size:16px; 
font-family:'Lucida Casual', 'Comic Sans MS';  
} 

http://jsfiddle.net/jasongennaro/3fkNJ/1/

También se puede utilizar para establecer las inheritfont en form campos.

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

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDITAR - explicación añadió

La mayoría de los navegadores muestran el texto dentro form elementos como la del sistema operativo del usuario. Esto es para mantener, tal como lo entiendo, una apariencia común para el usuario. Sin embargo, todo puede ser sobrescrito por el código anterior.

Answer 2

no hay nada de malo con el código .. Esto es común ya que el campo de entrada toma los ajustes del tema del sistema operativo por defecto ... Esto ya se ha discutido en stackoverflow. Mira el enlace a continuación para más detalles.

Why <textarea> and <textfield> not taking font-family and font-size from body?

Answer 3

trate de cambiar su atributo cuerpo CSS para

body *{font-family:'Lucida Casual', 'Comic Sans MS';} 

Las fuerzas * Cada elemento hijo para heredar el valor especificado en la regla CSS que haya escrito debido a las reglas CSS más especificación. Consulte fiddle here

Esto es práctico si desea que cada elemento de su página tenga el mismo valor de familia de fuentes, no tan práctico si desea que los formularios tengan un valor diferente.

Smashing Magazine has an article que pueden ser de ayuda.

Espero que ayude.

Answer 4

que trabajó para mí:

tags-input *, tags-input *:before, tags-input *:after { 
    font-family: "IRANSans" !important; 
} 

tags-input .tags .input { 
    padding-right: 5px; 
    float: right !important; 
    font: 13px "IRANSans", tahoma !important; 
} 

tags-input .tags .tag-item { 
    float: right !important; 
    font: 13px "IRANSans", tahoma !important; 
}