<input> erbt die Schriftart nicht von <body>

102

Ich habe Eingabe- und Beschriftungsfelder:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

und 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; }

Wenn der Code in Firefox geöffnet wird, sind die Schriftarten nicht identisch. Firebug zeigt, dass beide "sollten" erben und wenn ich mir berechnet anschaue, zeigt es, dass das Label Verdana verwendet. Die Eingabe zeigt jedoch, dass "MS Shell Dlg" verwendet wird.

Kann jemand erklären, was passiert und warum es nicht den normalen CSS-Regeln zu entsprechen scheint?

css Judy R.
quelle
Es ist sehr traurig, dass sie es nicht tun. Ich denke, das W3C hatte entschieden, dass es besser wäre, sie als Standard des Systems zu gestalten, als ihnen ihr eigenes Broswer-Styling
aufzuzwingen

Antworten:

124

Es erbt nicht standardmäßig, aber Sie können festlegen, dass es mit CSS erbt

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

Demo: http://jsfiddle.net/gaby/pEedc/1/

Gabriele Petrioli
quelle
Font-Eigenschaft automatisch erben, wenn es nicht erwähnt wird, siehe hier: developer.mozilla.org/en/CSS/font
diEcho
4
@diEcho, dies gilt für alle Elemente außer Formularelementen, die vom aktuellen Systemstil erben, damit sie ein dem Benutzer vertrautes Gefühl beibehalten ( standardmäßig ), aber manuell überschreibbar sind.
Gabriele Petrioli
1
Falsch oder nicht, was Firebug mir zeigte, war sehr verwirrend: Schriftgröße 12, aber berechnet wurde es immer noch 13.3333. Nachdem ich die Schriftgröße so eingestellt hatte, dass sie analog zu Gabys Antwort erbt, wurde mein Problem gelöst: O
Jeroen
@Gaby Es ist immer so gut, dass die Designer alle Gedanken für uns Entwickler machen ...;)
AGuyCalledGerald
Auch wenn Sie das inputInnere setzen label, labelerbt das Tag nicht Standard-CSS
AmerllicA
16

Formularelemente (Eingaben / Textbereich / usw.) erben keine Schriftinformationen. Sie müssen die Schriftfamilie für diese Elemente festlegen.

John Green
quelle
@jhon was immer du sagst mag wahr sein, gibt es ein Standard / gültiges Dokument dazu?
DiEcho
Schriftelemente erben auch keine Farbe, keinen Hintergrund usw. Tatsächlich sind Schriftelemente die unzuverlässigste Sache im gesamten HTML / CSS! Sie können keine Breite für ein Eingabefeld angeben und die Garantie ist für alle Browser gleich!
Ionuț Staicu
Ich meine Formelemente. Immer noch müde :)
Ionuț Staicu
@diEcho - Ehrlich gesagt habe ich die Spezifikationen durchsucht und sehe sie nirgendwo aufgerufen. Wenn ich auf "Verwandte" schaue , gibt SO mir einen doppelten Fragenlink : stackoverflow.com/questions/2874813 (der meine Antwort gibt, obwohl auch ohne Spezifikationslinks). Das Standard-Stylesheet in Chrome listet die Schriftart als "-webkit-small-control" auf. Dies bedeutet, dass der Text bereits überschrieben wird und daher spezifischer ist als alles, was für den Körper festgelegt wurde. Das gleiche gilt für TD-Elemente, wenn ich mich nicht irre. Ich weiß also nicht, was ich sagen soll, außer "so ist es eben". :)
John Green
5

Drei Jahre später, ich finde es seltsam , <input>Elemente der Typen reset, submitund buttonnicht erben font-familyin Chrome oder Safari. Ich entdeckte, dass sie auch keine Polsterung erhalten würden.

Aber wenn ich Schlamassel mit bestimmten Eigenschaften, wie background, borderoder dieser seltsamen appearanceEigenschaft, dann font-familyund paddinghat Wirkung, aber das native Look and Feel der Taste verloren, was kein Problem ist , wenn Sie vollständig die Tasten Restyling werden.

Wenn Sie eine native Schaltfläche mit geerbtem Aussehen wünschen font-family, verwenden Sie das <button>Element anstelle von <input>.

Siehe Codepen .

Stoutie
quelle
1

Ich hatte das gleiche Problem. Was für mich funktioniert hat, war das Hinzufügen des Stils direkt zum Eingabeelement im HTML. Ich codiere in React fyi.

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

rpd1297
quelle