css - examples - ¿Por qué<textarea> y<textfield> no toman font-family y font-size del cuerpo?
google fonts (4)
¿Por qué Textarea y textfield no toman la font-family y font-size de font-size del cuerpo?
Vea el ejemplo en vivo aquí http://jsbin.com/ucano4
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>texearea font</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}
</style>
</head>
<body>
<form action="" method="get">
<textarea name="" cols="20" rows="4"></textarea>
<input name="" type="text" />
</form>
<p>some text here</p>
</body>
</html>
Si es un comportamiento habitual, ¿debería escribir en CSS así? Necesito el mismo estilo en todos
body,textarea,input {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}
¿Y cuántos otros elementos en XHTML que no tomarán estilo de fuente del body {....} ?
Ciertos controles no están predeterminados para heredar la configuración de fuentes. Puede anular esto colocando esto en su CSS:
textarea {
font-family: inherit;
font-size: inherit;
}
Creo que lo que quiere decir es que algunos elementos son más específicos que otros en el DOM, o tienen un alcance menor. Dado que existe un área de texto dentro del cuerpo, cualquier estilo definido para textarea sobrescribirá los estilos de cuerpo {}. Así que el estilo de texto predeterminado de FF sobrescribe el estilo de su cuerpo, aunque el suyo se defina más adelante (por lo general, algo más reciente tendrá prioridad, pero no si se trata de un ámbito más amplio / menos específico).
De forma predeterminada, los navegadores representan la mayoría de los elementos de formulario (áreas de texto, cuadros de texto, botones, etc.) utilizando los controles del sistema operativo o los controles del navegador. Así que la mayoría de las propiedades de fuente están tomadas del tema que el sistema operativo está usando actualmente.
Tendrá que dirigirse a los elementos del formulario si desea cambiar sus estilos de fuente / texto; sin embargo, debería ser lo suficientemente fácil seleccionándolos, como acaba de hacer.
Hasta donde yo sé, solo los elementos de forma se ven afectados. Fuera de mi cabeza: input , button , textarea , select .
Todos los navegadores tienen hojas de estilo predeterminadas incorporadas. Por eso, cuando crea una página sin estilos definidos, las etiquetas <h1> son grandes y audaces, y <strong> hace que el texto sea negrita. De forma similar, los estilos de fuente para los elementos <input> y <textarea> se definen en los estilos predeterminados.
Para ver esta hoja de estilo en Firefox, coloca esto en tu barra de direcciones: resource://gre/res/forms.css
De todos modos, debe anular estos estilos como lo haría con cualquier otro estilo como lo hizo en el último ejemplo.
En caso de que se pregunte qué otros estilos están definidos, consulte los archivos CSS en sus recursos. Puede acceder a ellos a través de la url anterior, o buscando en su carpeta res en el directorio de Firefox (por ejemplo: c:/program files/mozilla firefox/res ). Estos son los que pueden estar afectando a los estilos de las páginas normales:
- html.css
- forms.css
- quirk.css
- ua.css