<input> n'hérite pas de la police de <body>

103

J'ai des champs d'entrée et d'étiquette:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

et CSS:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

Lorsque le code s'ouvre dans Firefox, les polices ne sont pas les mêmes. Firebug montre que les deux "devraient" hériter et quand je regarde calculé, cela montre que l'étiquette utilise Verdana. Cependant, l'entrée montre qu'il utilise "MS Shell Dlg".

Quelqu'un peut-il expliquer ce qui se passe et pourquoi il ne semble pas obéir aux règles CSS normales?

css Judy R
la source
c'est très triste qu'ils ne le font pas. Je suppose que le W3C avait décidé qu'il serait préférable de les laisser par défaut du système plutôt que de leur imposer leur propre style de
navigateur

Réponses:

126

Il n'hérite pas par défaut mais vous pouvez le définir pour hériter avec css

input, select, textarea, button{font-family:inherit;}

démo: http://jsfiddle.net/gaby/pEedc/1/

Gabriele Petrioli
la source
propriété de police hérite automatiquement si elle n'est pas mentionnée, voir ici: developer.mozilla.org/en/CSS/font
diEcho
4
@diEcho, cela est vrai pour tous les éléments en plus des éléments de formulaire, qui héritent du style actuel du système afin qu'ils conservent une sensation familière à l'utilisateur ( par défaut ), mais ils peuvent être remplacés manuellement.
Gabriele Petrioli
1
Faux ou pas, ce que Firebug me montrait était très déroutant: la taille de la police 12, mais calculée, elle devenait toujours 13,3333. Après avoir défini la taille de la police pour hériter de la réponse de Gaby, mon problème a été résolu: O
Jeroen
@Gaby C'est toujours si bien que les designers réfléchissent pour nous développeurs ...;)
AGuyCalledGerald
Aussi si vous mettez l' inputintérieur label, la labelbalise n'hérite pas du CSS par défaut
AmerllicA
16

Les éléments de formulaire (inputs / textarea / etc) n'héritent pas des informations de police. Vous devrez définir la famille de polices sur ces éléments.

John Green
la source
@jhon wat jamais ur dire peut b vrai, y a-t-il un document standard / valide à ce sujet ??
diEcho
les éléments de police n'héritent pas non plus de la couleur, de l'arrière-plan, etc. En fait, les éléments de police sont la chose la moins fiable dans tout le html / css! Vous ne pouvez pas spécifier de largeur pour une zone de saisie et la garantie sera la même sur tous les navigateurs!
Ionuț Staicu
Je veux dire des éléments de formulaire. Still sleepy :)
Ionuț Staicu
@diEcho - Honnêtement, j'ai fait une recherche dans les spécifications et je ne le vois nulle part. En regardant `` Related '', et SO me donne un lien de question en double: stackoverflow.com/questions/2874813 (qui donne ma réponse, mais également sans liens de spécification). La feuille de style par défaut de Chrome répertorie la police sous la forme "-webkit-small-control;", ce qui signifie qu'elle remplace déjà le corps et est donc plus spécifique que tout ce qui est défini sur le corps. Il en va de même pour les éléments TD, si je ne me trompe pas. Donc je ne sais pas quoi dire à part "c'est comme ça". :)
John Green
5

Trois ans plus tard, je trouve étrange <input>éléments de types reset, submitet buttonne pas hériter font-familydans Chrome ou Safari. J'ai découvert qu'ils ne recevraient pas non plus de rembourrage.

Mais lorsque je joue avec certaines propriétés, comme background, borderou cette appearancepropriété étrange , alors font-familyet paddingj'ai un effet, mais l'apparence native du bouton est perdue, ce qui n'est pas un problème si vous restylez complètement les boutons.

Si vous voulez un bouton natif, avec hérité font-family, utilisez l' <button>élément à la place de <input>.

Voir Codepen .

Stoutie
la source
1

J'ai eu le même problème. Ce qui a fonctionné pour moi a été d'ajouter le style directement à l'élément d'entrée dans le html. Je code dans React fyi.

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

rpd1297
la source