<input> не наследует шрифт от <body>

103

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

<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 показывает, что оба «должны» наследоваться, и когда я смотрю на computed, он показывает, что метка использует Verdana. Однако входные данные показывают, что он использует "MS Shell Dlg".

Может ли кто-нибудь объяснить, что происходит и почему это не соответствует обычным правилам CSS?

css Джуди Р
источник
очень печально, что они этого не делают. Думаю, W3C решил, что лучше оставить их стилизованными по умолчанию в системе, а не навязывать им свой собственный стиль
браузера

Ответы:

127

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

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

демонстрация: http://jsfiddle.net/gaby/pEedc/1/

Габриэле Петриоли
источник
свойство font автоматически наследовать, если оно не упомянуто, см. здесь: developer.mozilla.org/en/CSS/font
diEcho
4
@diEcho, это верно для всех элементов, кроме элементов формы, которые наследуются от текущего стиля системы, поэтому они сохраняют ощущение, знакомое пользователю ( по умолчанию ), но их можно переопределить вручную.
Габриэле Петриоли
1
Неправильно это или нет, но то, что мне показывал Firebug, очень сбивало с толку: размер шрифта 12, но вычисленный он все равно стал 13,3333. После установки font-size для наследования, аналогичного ответу Габи, моя проблема была решена: O
Джерун
@Gaby Это всегда так хорошо, что дизайнеры заставляют думать за нас, разработчиков ...;)
AGuyCalledGerald
Также, если вы поместите inputвнутрь label, labelтег не наследует CSS по умолчанию
AmerllicA
16

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

Джон Грин
источник
@jhon, что ты когда-либо говорил, может быть правдой, есть ли какой-либо стандартный / действительный документ по этому поводу ??
diEcho
элементы шрифта также не наследуют цвет, фон и так далее. На самом деле элементы шрифта - это самая ненадежная вещь во всем html / css! Вы не можете указать ширину поля ввода, и гарантия будет одинаковой для всех браузеров!
Ionu Staicu
Я имею в виду элементы формы. Все еще сонный :)
Ionuț Staicu
@diEcho - Честно говоря, я просмотрел спецификации, и нигде не видел, чтобы это вызвало. Просматривая «Связанные», SO дает мне дублирующую ссылку на вопрос: stackoverflow.com/questions/2874813 (что дает мой ответ, хотя и без ссылок на спецификации). Таблица стилей по умолчанию в Chrome указывает шрифт как «-webkit-small-control;», что означает, что он уже переопределяет тело, поэтому является более конкретным, чем все, что установлено в теле. То же самое и с элементами TD, если не ошибаюсь. Так что я не знаю, что сказать, кроме «так оно и есть». :)
Джон Грин
5

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

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

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

См. Codepen .

Stoutie
источник
1

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

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

rpd1297
источник