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

Question

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

Demandé el 21 de Mai, 2011: Quand la question a-t-elle été
10520 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

J'ai des champs de saisie et d'étiquetage :

<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 polices "devraient" hériter et quand je regarde le calcul, il montre que l'étiquette utilise Verdana. Cependant, l'entrée montre qu'elle utilise "MS Shell Dlg".

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

Demandé el 21 de Mai, 2011 par Judy R

0 votes

C'est très triste qu'ils ne le fassent pas. Je suppose que le W3C a décidé qu'il était préférable de les laisser être stylisés par défaut dans le système plutôt que de leur imposer leur propre style de broswer.

Commenté el 29 de Mai, 2013 par vsync

Answer 1

4 Réponses

Answer 2

151voto

Gaby aka G. Petrioli Points 85891

Il n'hérite pas par défaut mais vous pouvez le configurer pour qu'il hérite avec css

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

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

Répondu el 21 de Mai, 2011 par Gaby aka G. Petrioli (85891 Points )

0 votes

La propriété de la police hérite automatiquement si elle n'est pas mentionnée, voir ici : developer.mozilla.org/en/CSS/font

Commenté el 21 de Mai, 2011 par diEcho

5 votes

@diEcho, ceci est vrai pour tous les éléments, à l'exception des éléments de formulaire, qui héritent du style du système actuel afin de conserver un aspect familier à l'utilisateur ( par défaut ), mais ils peuvent être remplacés manuellement.

Commenté el 21 de Mai, 2011 par Gaby aka G. Petrioli

1 votes

Faux ou pas, ce que Firebug me montrait était très déroutant : taille de police 12, mais calculée elle devenait quand même 13.3333. Après avoir défini la taille de la police comme héritée, de manière analogue à la réponse de Gaby, mon problème était résolu :O

Commenté el 27 de Mai, 2011 par Jeroen

Afficher 3 autres commentaires

Answer 3

16voto

John Green Points 7331

Les éléments de formulaire (entrées/textarea/etc) n'héritent pas des informations sur la police. Vous devez définir la famille de caractères de ces éléments.

Répondu el 21 de Mai, 2011 par John Green (7331 Points )

0 votes

@jhon tout ce que vous dites est peut-être vrai, mais existe-t-il un document standard/valide à ce sujet ?

Commenté el 21 de Mai, 2011 par diEcho

1 votes

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 de tout le code html/css ! Vous ne pouvez pas spécifier une largeur pour une boîte de saisie et la garantie sera la même sur tous les navigateurs !

Commenté el 21 de Mai, 2011 par Ionut Staicu

0 votes

Je veux dire les éléments de forme. Encore endormi :)

Commenté el 21 de Mai, 2011 par Ionut Staicu

Afficher 1 autres commentaires

Answer 4

5voto

stoutie Points 301

Trois ans plus tard, je trouve étrange <input> éléments de types reset , submit y button n'héritent pas font-family dans Chrome ou Safari. J'ai découvert qu'ils ne recevaient pas non plus de rembourrage.

Mais quand je joue avec certaines propriétés, comme background , border ou cet étrange appearance la propriété, alors font-family y padding ont un effet, mais l'apparence native du bouton est perdue, ce qui n'est pas un problème si vous restyliser complètement les boutons.

Si vous voulez un bouton au look natif, avec un héritage de font-family utilisez le <button> au lieu de l'élément <input> .

Ver Codepen .

Répondu el 13 de Janvier, 2015 par stoutie (301 Points )

Answer 5

-1voto

rpd1297 Points 9

J'ai eu le même problème. Ce qui a fonctionné pour moi, c'est d'ajouter le style directement à l'élément input dans le html. Je code en React pour info.

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

Répondu el 30 de Septembre, 2017 par rpd1297 (9 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: