web-dev-qa-db-fra.com

La famille de polices n'est pas héritée des champs de saisie du formulaire?

Les éléments de saisie de formulaire html tels que le champ de saisie ou la zone de sélection n'héritent-ils pas automatiquement de la propriété font-family du corps?

body {
 font-family:'Lucida Casual', 'Comic Sans MS';
}

La police ci-dessus ne sera pas utilisée dans le champ de saisie de formulaire ci-dessous:

<form> 
   <div>
        <label for="name">Name</label>  
        <input id="name" name="name" type="text" />  

   <div>
</form>

Veuillez consulter http://jsfiddle.net/3fkNJ/

Est-il courant de devoir redéfinir la famille de polices pour les champs de saisie ou est-ce que je fais quelque chose de mal?

htmlcssformsfontsinput
36
sunjie

Oui, vous devez placer font dans la balise input.

input{
  padding:5px;
  font-size:16px;
  font-family:'Lucida Casual', 'Comic Sans MS';    
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

Vous pouvez également utiliser inherit pour définir les champs font sur form.

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

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDIT - explication ajoutée

La plupart des navigateurs affichent le texte contenu dans les éléments form comme celui du système d'exploitation de l'utilisateur. C’est pour conserver, si je comprends bien, une apparence commune pour l’utilisateur. Cependant, tout cela peut être écrasé par le code ci-dessus.

44
Jason Gennaro

il n’ya rien d’anormal dans le code. C’est courant car le champ de saisie prend les paramètres de thème du système d’exploitation par défaut. Cela a déjà été expliqué dans stackoverflow. Regardez le lien ci-dessous pour plus de détails.

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

4
z0mBi3

Essayez de changer votre attribut de corps CSS en 

body *{font-family:'Lucida Casual', 'Comic Sans MS';}

Le * force chaque élément enfant à hériter de la valeur spécifiée dans la règle CSS que vous avez écrite en raison de la spécification des règles CSS. Voir le violon ici

C'est pratique si vous voulez que tous les éléments de votre page aient la même valeur famille de polices, ce qui est moins pratique si vous voulez que vos formulaires aient une valeur différente. 

Smashing Magazine a un article qui peut vous aider.

J'espère que ça aide. 

1
Ryan

cela a fonctionné pour moi:

tags-input *, tags-input *:before, tags-input *:after {
  font-family: "IRANSans" !important;
}

tags-input .tags .input {
  padding-right: 5px;
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}

tags-input .tags .tag-item {
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}
0
mehdi