Heim > Web-Frontend > CSS-Tutorial > Warum erbt mein „Input'-Element nicht die Schriftart vom „Body'?

Warum erbt mein „Input'-Element nicht die Schriftart vom „Body'?

Mary-Kate Olsen
Freigeben: 2024-10-28 02:24:30
Original
512 Leute haben es durchsucht

Why Doesn't My

Eingabe erbt Schriftart nicht vom Textkörper

Bei der Verwendung von CSS zur Formatierung von HTML-Elementen kann es manchmal vorkommen, dass bestimmte Elemente keine Stileigenschaften erben wie erwartet. Dies kann bei Eingabefeldern der Fall sein, die standardmäßig nicht die Eigenschaft „font-family“ von ihrem übergeordneten Element erben.

Im bereitgestellten Beispiel sind die CSS-Regeln so eingestellt, dass sie eine bestimmte Schriftfamilie für beide Elemente definieren body-Element und benutzerdefinierte Klassen adm, die sowohl auf die Beschriftungs- als auch auf die Eingabeelemente angewendet werden. In Firefox stimmt die Schriftart des Eingabefelds jedoch nicht mit der Schriftart der Beschriftung überein.

Um dieses Problem zu beheben, können Sie mithilfe von CSS explizit festlegen, dass das Eingabefeld seine Schriftart von seinem übergeordneten Element erben soll:

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

Durch das Hinzufügen dieser Regel erbt das Eingabefeld nun die im Body-Element definierte Eigenschaft „font-family“, um sicherzustellen, dass es dieselbe Schriftart wie der Rest des Textes auf der Seite verwendet.

Sie können dies überprüfen, indem Sie sich eine Demo ansehen: http://jsfiddle.net/gaby/pEedc/1/.

Das obige ist der detaillierte Inhalt vonWarum erbt mein „Input'-Element nicht die Schriftart vom „Body'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage