[CSS]Font par défaut des <select>, <button> ...

NoSmoking

Observation

Par défaut les éléments <input>, <select>, <textarea> ou autre <button> n'héritent pas de la propriété font du parent. La raison est historique et remonte à l'époque où les formulaires ont été ajoutés au HTML, à partir de la spécification HTML 2.

Pour les <select>, et sur ce navigateur, la font appliquée est la suivante :

Pour que la font du parent s'applique à ces éléments il faut ajouter la déclaration CSS font:inherit à ceux-ci.

Tests en live

Pour appliquer la font du parent aux éléments, cliquez sur les cases à cochées.

font: inheritJuste pour voir le format

font: inheritJuste pour voir le format

Ici la font-family sur les <option> n'est pas définie.

font: inheritJuste pour voir le format

Ici la font-family sur les <option> est définie.

Conclusion

Il suffit d'ajouter cette règle CSS générique à votre feuille de style : 

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

Sous FireFox, les <option> n'héritent pas complétement de la fonte du <select>

Il faut donc pour FireFox re-préciser la font-family. 

/* ajout pour FireFox */
option {
  font-family: nom-de-la-font;
}

Ressources