Pourquoi <textarea> et <textfield> ne prennent pas font-family et font-size du corps?

118

Pourquoi Textareaet textfieldne pas prendre font-familyet font-sizedu corps?

Voir l'exemple 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 body {....}?

css xhtml Jitendra Vyas
la source

Réponses:

76

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

Vous devrez cibler les éléments du formulaire eux-mêmes si vous souhaitez modifier leurs styles de police / texte - 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. Du haut de ma tête: input, button, textarea, select.

BoltClock
la source
32
Le remède le plus direct si ce comportement est indésirable est d'ajouter à vos styles, textarea, input, button, select { font-family: inherit; font-size: inherit; }.
Devvyn
@Devvyn, vous devriez ajouter text-align: inheritcar les textes des boutons sont souvent alignés au centre.
Joshua Muheim
Comment faire le contraire, c'est-à-dire utiliser cette police de système d'exploitation pour toute ma page Web / mon corps?
agirault le
@agirault vous pouvez faire quelque chose comme ceci: body {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", sans-serif; }
getup8
149

Certains contrôles ne sont pas définis par défaut pour hériter des paramètres de police. Vous pouvez remplacer cela en le plaçant dans votre CSS:

textarea {
   font-family: inherit;
   font-size: inherit;
}
Spoulson
la source
4
IE avant la version 8 ne prend pas en charge l'héritage, donc cela ne fonctionnera pas.
DisgruntledGoat
6
Je pense que ce n'est qu'une solution multi-navigateur pour définir chaque élémentbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }
Jitendra Vyas
1
Je suis d'accord, cette approche est plus pratique. Je voulais juste montrer le comportement que vous voyiez en utilisant l' inheritapproche.
spoulson
Malheureusement, chrome (version 59.0.3071.115) n'applique pas font-size: inherit; sans spécifier la famille de polices.
Ondrej du
font-weight: inherit;est manquant.
ceving
10

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 <h1>balises sont grandes et en gras et <strong>mettent le texte en gras. De même, les styles de police <input>et les <textarea>éléments 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 dans vos ressources. Vous pouvez y accéder via l'url ci-dessus, ou en regardant dans votre resdossier dans le répertoire firefox (par exemple:) c:\program files\mozilla firefox\res. Ce sont ceux qui peuvent affecter les styles des pages normales:

  • html.css
  • forms.css
  • quirk.css
  • ua.css
nickf
la source
mais <h1> prend le style de police de <body>mais <textarea>pas
Jitendra Vyas
3
Les styles de h1ne définissent pas de police, vos bodystyles ont donc la priorité. Les styles de inputdéfinissent un style, et il est plus spécifique que votre sélecteur, donc il gagne.
nickf
+1 pour votre commentaire. Je n'étais pas au courant. vous voulez dire que certains éléments ont un style spécifique par défaut dans le navigateur et ne peuvent pas être remplacés par le corps {....}
Jitendra Vyas
1

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 zone de texte existe à l'intérieur du corps, tout style défini pour la zone de texte écrasera les styles de corps {}. Ainsi, le style de zone de texte par défaut de FF écrase votre style de corps, même si le vôtre est défini plus tard (généralement quelque chose de plus récent aura la priorité, mais pas si c'est dans une portée plus large / moins spécifique).

utilisateur1072406
la source
0

J'ai essayé toutes sortes d'astuces pour arrêter textarea sur mobile en utilisant une police beaucoup plus grande que le texte normal. Il semble que lorsque ma zone de texte était cols = "45", la police était normale, mais dès qu'elle a été élevée à cols = "71", même si elle est restée à l'intérieur des balises td, la police s'est agrandie.

Sur la page mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) j'ai trouvé ceci

textarea {
   text-size-adjust: none;
}

Cela me semble être la meilleure réponse. Cela fonctionne sur PC, tablette et, surtout, sur mon téléphone Android.

Brian Jones
la source