recherche
Maisoninterface Webtutoriel CSSPourquoi mon élément \'Input\' n'hérite-t-il pas de la police du \'Body\' ?

Why Doesn't My

L'entrée n'hérite pas de la police du corps

Lors de l'utilisation de CSS pour styliser des éléments HTML, il peut parfois arriver que certains éléments n'héritent pas des propriétés de style comme prévu. Cela peut être le cas des champs de saisie, qui par défaut n'héritent pas de la propriété font-family de leur élément parent.

Dans l'exemple fourni, les règles CSS sont définies pour définir une famille de polices spécifique pour les deux L'élément body et les classes personnalisées adm sont appliqués à la fois aux éléments label et input. Cependant, dans Firefox, la police du champ de saisie ne correspond pas à celle du libellé.

Pour résoudre ce problème, vous pouvez spécifier explicitement que le champ de saisie doit hériter de sa police de son élément parent en utilisant CSS :

<code class="css">input, select, textarea, button {
  font-family: inherit;
}</code>

En ajoutant cette règle, le champ de saisie héritera désormais de la propriété font-family définie dans l'élément body, garantissant qu'il utilise la même police que le reste du texte de la page.

Vous pouvez le vérifier en visionnant une démo : http://jsfiddle.net/gaby/pEedc/1/.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Faire un graphique? Essayez d'utiliser Mobx State Tree pour alimenter les donnéesFaire un graphique? Essayez d'utiliser Mobx State Tree pour alimenter les donnéesApr 15, 2025 am 09:49 AM

Qui aime les graphiques? Tout le monde, non? Il existe de nombreuses façons de les créer, y compris un certain nombre de bibliothèques. Il y a d3.js, chart.js, amcharts, highcharts et

Bloquant les mains tierces du pot à biscuitsBloquant les mains tierces du pot à biscuitsApr 15, 2025 am 09:48 AM

Les cookies tiers sont définis sur votre ordinateur à partir de domaines autres que celui que vous êtes en fait en ce moment. Par exemple, si je me connecte à CSS-Tricks.com,

Widgets de dix tonnesWidgets de dix tonnesApr 15, 2025 am 09:43 AM

Lors d'une récente conférence (désolé, j'oublie lequel), il y avait un petit exemple de mauvaise performance Web sous la forme d'un widget tiers. L'exemple

Recettes pour tests de performances Applications de page unique dans WebPageTestRecettes pour tests de performances Applications de page unique dans WebPageTestApr 15, 2025 am 09:42 AM

WebPageTest est un outil en ligne et un projet open source pour aider les développeurs à auditer les performances de leurs sites Web. En tant qu'évangéliste de performance Web à

Arrêter les animations pendant le redimensionnement des fenêtresArrêter les animations pendant le redimensionnement des fenêtresApr 15, 2025 am 09:40 AM

Disons que vous avez une page qui a un tas de transitions et d'animations sur toutes sortes d'éléments. Certains d'entre eux sont déclenchés lorsque la fenêtre est redimensionnée parce qu'ils

Tissant un élément sur et sous un autre élémentTissant un élément sur et sous un autre élémentApr 15, 2025 am 09:38 AM

Dans cet article, nous allons utiliser les superpuissances CSS pour créer un effet visuel où deux éléments se chevauchent et tissent ensemble. L'épiphanie de cette conception est venue

Y a-t-il des nombres aléatoires dans CSS?Y a-t-il des nombres aléatoires dans CSS?Apr 15, 2025 am 09:37 AM

CSS vous permet de créer des dispositions et des interfaces dynamiques sur le Web, mais en tant que langue, elle est statique: une fois qu'une valeur est définie, elle ne peut pas être modifiée. L'idée de

Élément flottant au milieu d'un paragrapheÉlément flottant au milieu d'un paragrapheApr 15, 2025 am 09:36 AM

Dites que vous voulez avoir une image (ou tout autre élément) à gauche visuellement à gauche dans un paragraphe de texte. Mais comme ... au milieu du paragraphe, pas juste à

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles