web-dev-qa-db-fra.com

Pourquoi <textarea> et <textfield> ne prennent-ils pas la police et la taille de police du corps?

Pourquoi Textarea et textfield ne pas prendre font-family et font-size du corps?

Voir des exemples en direct ici http://jsbin.com/ucano4

Code

        <!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 c'est un comportement habituel, devrais-je écrire en css comme ceci. j'ai besoin du même style en tout

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

Et combien d’autres éléments en XHTML qui ne prendront pas le style de police de body {....}?

cssxhtml
107
Jitendra Vyas

Par défaut, les navigateurs affichent la plupart des éléments de formulaire (zones de texte, zones de texte, boutons, etc.) à l'aide des commandes du système d'exploitation ou des commandes du navigateur. Ainsi, la plupart des propriétés de police sont tirées du thème actuellement utilisé par le système d'exploitation.

Si vous souhaitez modifier leurs styles de police/texte, vous devrez cibler les éléments de formulaire eux-mêmes. Cela devrait être assez facile en les sélectionnant, comme vous venez de le faire.

Autant que je sache, seuls les éléments de formulaire sont affectés. De mémoire: input, button, textarea, select.

67
BoltClock

Certains contrôles ne sont pas configurés par défaut pour hériter des paramètres de police. Vous pouvez remplacer ceci par endroit dans votre CSS:

textarea {
   font-family: inherit;
   font-size: inherit;
}
137
spoulson

Tous les navigateurs ont des feuilles de style par défaut intégrées. C'est pourquoi, lorsque vous créez une page sans aucun style défini, les balises <h1> Sont grandes et en gras et <strong> Met le texte en gras. De même, les styles de police pour les éléments <input> Et <textarea> Sont définis dans les styles par défaut.

Pour voir cette feuille de style dans Firefox, placez-la dans votre barre d'adresse: resource://gre/res/forms.css

Quoi qu'il en soit, vous devez remplacer ces styles comme vous le feriez pour tout autre style comme vous l'avez fait dans ce dernier exemple.

Si vous vous demandez quels autres styles sont définis, consultez les fichiers CSS de vos ressources. Vous pouvez y accéder via l'URL ci-dessus, ou en cherchant dans votre dossier res du répertoire firefox (par exemple: c:\program files\mozilla firefox\res). Ce sont ceux qui peuvent affecter les styles des pages normales:

  • html.css
  • formulaires.css
  • quirk.css
  • ua.css
10
nickf

Je pense que ce qu'il veut dire, c'est que certains éléments sont plus spécifiques que d'autres dans le DOM, ou ont une portée plus petite. Puisqu'une textarea existe à l'intérieur du corps, tout style défini pour textarea remplacera les styles de corps {}. Ainsi, le style textarea par défaut de FF écrase votre style de corps, même si le vôtre est défini plus tard (généralement, un élément plus récent a la priorité, mais pas s'il est dans un champ plus large/moins spécifique).

1
user1072406