<input> nie dziedziczy czcionki z <body>

103

Mam pola wprowadzania i oznaczania:

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

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

Kiedy kod otwiera się w przeglądarce Firefox, czcionki nie są takie same. Firebug pokazuje, że oba „powinny” dziedziczyć, a kiedy patrzę na komputer, pokazuje, że etykieta używa Verdana. Jednak dane wejściowe pokazują, że używa „MS Shell Dlg”.

Czy ktoś może wyjaśnić, co się dzieje i dlaczego wydaje się, że nie przestrzega normalnych reguł CSS?

css

— Judy R.
źródło

to bardzo smutne, że tego nie robią. Wydaje mi się, że W3C zdecydowało, że lepiej byłoby pozostawić je jako domyślne dla systemu, niż

— narzucać

126

Domyślnie nie dziedziczy, ale możesz ustawić dziedziczenie za pomocą css

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

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

— Gabriele Petrioli
źródło

właściwość czcionki dziedziczona automatycznie, jeśli nie została wymieniona, zobacz tutaj: developer.mozilla.org/en/CSS/font

— diEcho

4

@diEcho, dotyczy to wszystkich elementów oprócz elementów formularzy, które dziedziczą z bieżącego stylu systemu, dzięki czemu zachowują wrażenie znane użytkownikowi ( domyślnie ), ale można je ręcznie zastąpić.

— Gabriele Petrioli

1

Źle czy nie, to, co pokazywał mi Firebug, było bardzo zagmatwane: rozmiar czcionki 12, ale obliczony nadal wynosił 13,3333. Po ustawieniu rozmiaru czcionki na dziedziczenie analogiczne do odpowiedzi Gaby mój problem został rozwiązany: O

— Jeroen

@Gaby Zawsze jest tak dobrze, że projektanci myślą o nas, programistach ...;)

— AGuyCalledGerald

Również jeśli umieścisz inputwewnątrz label, labeltag nie odziedziczy domyślnego css

— AmerllicA

16

Elementy formularza (dane wejściowe / obszar tekstu / itp.) Nie dziedziczą informacji o czcionkach. Musisz ustawić rodzinę czcionek dla tych elementów.

— John Green
źródło

@jhon wat kiedykolwiek ur mówiąc, może b prawda, czy istnieje jakiś standardowy / ważny dokument dotyczący tego?

— diEcho

Elementy czcionek również nie dziedziczą koloru, tła itd. W rzeczywistości elementy czcionek są najbardziej zawodną rzeczą w całym html / css! Nie możesz określić szerokości pola wejściowego, a gwarancja będzie taka sama we wszystkich przeglądarkach!

— Ionuț Staicu

Mam na myśli elementy formy. Wciąż śpiący :)

— Ionuț Staicu

@diEcho - Szczerze, przeszukałem specyfikacje i nigdzie nie widzę, żeby to było wywoływane. Patrząc na „Powiązane” i SO podaje mi zduplikowany link do pytania: stackoverflow.com/questions/2874813 (który daje moją odpowiedź, chociaż również bez linków do specyfikacji). Domyślny arkusz stylów w Chrome wyświetla czcionkę jako „-webkit-small-control;”, co oznacza, że już przesłania treść, dlatego jest bardziej szczegółowy niż cokolwiek ustawionego w treści. To samo dotyczy elementów TD, jeśli się nie mylę. Więc nie wiem, co powiedzieć poza „po prostu tak jest”. :)

— John Green

5

Trzy lata później, jestem znalezieniem to dziwne <input>elementy typów reset, submiti buttonnie dziedziczą font-familyw Chrome lub Safari. Odkryłem, że nie otrzymają też wypełnienia.

Ale kiedy robię bałagan z pewnymi właściwościami, takimi jak background, borderlub ta dziwna appearancewłaściwość, wtedy font-familyi paddingskutkuje, ale natywny wygląd przycisku zostaje utracony, co nie stanowi problemu, jeśli całkowicie zmieniasz styl przycisków.

Jeśli chcesz, aby przycisk wyglądał natywnie, z dziedziczeniem font-family, użyj <button>elementu zamiast <input>.

Zobacz Codepen .

— Stoutie
źródło

1

Miałem ten sam problem. U mnie zadziałało dodanie stylu bezpośrednio do elementu wejściowego w html. Koduję w React fyi.

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

— rpd1297
źródło