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

118

¿Por qué Textareay textfieldno tomar font-familyy font-sizedel 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 de esta manera. necesito el mismo estilo en todos

body,textarea,input  {
                font-family: Verdana, Geneva, sans-serif;
                font-size:16px
            }

¿Y de cuántos otros elementos en XHTML no tomarán estilo de fuente body {....}?

css xhtml Jitendra Vyas
fuente

Respuestas:

76

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

Tendrá que apuntar a los elementos del formulario si desea cambiar sus estilos de fuente / texto; sin embargo, debería ser bastante fácil seleccionándolos, como acaba de hacer.

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

BoltClock
fuente
32
El remedio más directa si este comportamiento no es deseable es para agregar a sus estilos, textarea, input, button, select { font-family: inherit; font-size: inherit; }.
Devvyn
@Devvyn, debe agregar text-align: inheritporque los textos de los botones a menudo están alineados en el centro.
Joshua Muheim
¿Cómo puedo hacer lo contrario, es decir, usar esa fuente del sistema operativo para toda mi página web / cuerpo?
Agirault
@agirault, puedes hacer algo como esto: body {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", sans-serif; }
getup8
149

Algunos 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;
}
Spoulson
fuente
4
IE anterior a la versión 8 no admite la herencia, por lo que no funcionará.
DisgruntledGoat
6
Creo que esta es solo una solución de navegador cruzado para definir cada elementobody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }
Jitendra Vyas
1
Estoy de acuerdo, ese enfoque es más práctico. Solo quería demostrar el comportamiento que estaba observando utilizando el inheritenfoque.
spoulson
Desafortunadamente, Chrome (versión 59.0.3071.115) no está aplicando font-size: heredar; sin especificar la familia de fuentes.
Ondrej
font-weight: inherit;Está perdido.
hasta el
10

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

Para ver esta hoja de estilo en Firefox, coloque esto en su 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 esté preguntando qué otros estilos se definen, consulte los archivos CSS en sus recursos. Puede acceder a ellos a través de la URL anterior, o buscando en su rescarpeta 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
  • quirk.css
  • ua.css
nickf
fuente
pero <h1> está tomando el estilo de fuente de <body>pero <textarea>no
Jitendra Vyas
3
Los estilos para h1no definen una fuente, por lo tanto, sus bodyestilos tienen prioridad. Los estilos para inputdefinen un estilo, y es más específico que su selector, por lo que gana.
nickf
+1 por tu comentario. Yo no estaba consciente. quiere decir que algunos elementos tienen un estilo específico por defecto en el navegador y no pueden ser anulados por el cuerpo {....}
Jitendra Vyas
1

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 área de texto sobrescribirá los estilos de cuerpo {}. Entonces, el estilo de área de texto predeterminado de FF sobrescribe el estilo de su cuerpo, aunque el suyo se define más adelante (generalmente algo más reciente tendrá prioridad, pero no si está en un alcance más amplio / menos específico).

usuario1072406
fuente
0

Probé todo tipo de trucos para detener el área de texto en el móvil usando una fuente mucho más grande que el texto normal. Parece que cuando mi área de texto era cols = "45", la fuente era normal, pero tan pronto como se elevó a cols = "71", aunque se mantuvo dentro de las etiquetas td, la fuente creció.

En la página de mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) encontré esto

textarea {
   text-size-adjust: none;
}

Parece la mejor respuesta para mí. Funciona en PC, tableta y, lo más importante, en mi teléfono Android.

Brian Jones
fuente