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


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

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

No usará la fuente de arriba en el siguiente campo de entrada de formulario:

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

   <div>
</form>

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

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


32
2018-06-29 12:34


origen


Respuestas:


Sí, necesitas colocar el font en el input etiqueta.

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

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

También puedes usar inherit establecer el font en form campos.

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

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

EDITAR - explicación agregada

La mayoría de los navegadores renderizan texto dentro form elementos como el 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.


39
2018-06-29 12:37



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.

¿Por qué <textarea> y <textfield> no toman font-family y font-size del cuerpo?


4
2018-06-29 12:47



Intenta cambiar tu atributo de cuerpo CSS a

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

El * fuerza a cada elemento secundario a heredar el valor especificado dentro de la regla CSS que ha escrito debido a las reglas CSS sobre la especificación. Ver el violín aquí

Esto es útil 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 tiene un artículo eso puede ayudarte más.

Espero que ayude.


1
2018-06-29 12:50



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

0
2018-05-08 07:00