¿Por qué y no tomar font-family y font-size del cuerpo?

¿por Qué Textarea y textfield no tomar font-family y font-size del cuerpo?

Ver 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 entonces debería escribir en css como este. 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 el estilo de fuente de body {....}?

 96
cssxhtml
Author: Jitendra Vyas, 2010-05-20
Source

4 answers

De forma predeterminada, los navegadores renderizan la mayoría de los elementos del formulario (áreas de texto, cuadros de texto, botones, etc.) utilizando controles del sistema operativo o controles del navegador. Por lo tanto, la mayoría de las propiedades de la fuente se toman del tema que el sistema operativo está utilizando actualmente.

Tendrás que dirigirte a los elementos del formulario si quieres cambiar sus estilos de fuente/texto, aunque debería ser bastante fácil seleccionarlos, como acabas de hacer.

Hasta donde yo sé, solo los elementos de la forma se ven afectados. La parte superior de mi cabeza: input, button, textarea, select.

 59
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-20 15:07:39

Ciertos controles no están predeterminados para heredar la configuración de la fuente. Puedes anular esto colocando esto en tu CSS:

textarea {
   font-family: inherit;
   font-size: inherit;
}
 128
Author: spoulson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-20 15:14:41

Todos los navegadores tienen hojas de estilo predeterminadas integradas. Es por eso que, cuando haces una página sin ningún estilo definido, las etiquetas <h1> son grandes y en negrita, y <strong> hace que el texto se ponga en negrita. Del mismo modo, los estilos de fuente para los elementos <input> y <textarea> se definen en los estilos predeterminados.

Para ver esta hoja de estilos en Firefox, pon esto en tu barra de direcciones: resource://gre/res/forms.css

De todos modos, tienes que reemplazar estos estilos como lo harías con cualquier otro estilo como lo hiciste en el último ejemplo.

En caso de te estás preguntando qué otros estilos están definidos, echa un vistazo a los archivos CSS en tus 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 los estilos de las páginas normales:

  • html.css
  • formularios.css
    • [16] quirk.css
  • ua.css
 10
Author: nickf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-20 15:11:56

Creo que lo que quiere decir es que algunos elementos son más específicos que otros en el DOM, o tienen un alcance más pequeño. Dado que existe un textarea dentro del cuerpo, cualquier estilo definido para textarea sobrescribirá los estilos body {}. Por lo tanto, el estilo de área de texto predeterminado de FF sobrescribe su estilo de cuerpo, aunque el suyo se defina más tarde (por lo general, algo más reciente tendrá prioridad, pero no si está en un ámbito más amplio/menos específico).

 1
Author: user1072406,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-23 03:07:55