Почему <input> не наследует шрифт из тела?

У меня есть поля ввода и метки:

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

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

Когда код открывается в Firefox, шрифты не совпадают. Firebug показывает, что оба "должны" наследовать, и когда я смотрю на вычисленный, он показывает, что метка использует Verdana. Однако ввод показывает, что он использует "MS Shell Dlg". Может ли кто-нибудь объяснить, что происходит, и почему он, похоже, не подчиняется нормальным правилам CSS?

Джуди

Ответы

Ответ 1

По умолчанию он не наследуется, но вы можете установить его наследование с помощью css

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

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

Ответ 2

Элементы формы (входы/textarea/etc) не наследуют информацию о шрифтах. Вам нужно будет установить семейство шрифтов на эти элементы.

Ответ 3

Спустя три года я нахожу странным <input> элементы типов reset, submit и button не наследуют font-family в Chrome или Safari. Я обнаружил, что они также не получат отступы.

Но когда я общаюсь с определенными свойствами, такими как background, border, или это странное свойство appearance, то эффект font-family и padding имеет эффект, но внутренний вид кнопки и ощущение теряется, что не является проблемой, если вы полностью переустанавливаете кнопки.

Если вы хотите создать собственную кнопку поиска с унаследованным font-family, используйте <button> вместо <input>.

См. Codepen.

Ответ 4

У меня была такая же проблема. То, что работало для меня, добавляло стиль непосредственно к элементу ввода в html. Я кодирую в React fyi.

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