<input> не успадковує шрифт від <body>

102

У мене є поля введення та мітки:

<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?

css

— Джуді Р
джерело

це дуже сумно, вони не роблять. Я думаю, W3C вирішив, що було б краще залишити їх для стилю як за замовчуванням системи, а не примушувати їх власний стиль

— броузера

125

Він не успадковується за замовчуванням, але ви можете встановити його для спадкування за допомогою css

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

демо: http://jsfiddle.net/gaby/pEedc/1/

— Габріеле Петріолі
джерело

властивість шрифту автоматично успадковується, якщо воно не згадується, дивіться тут: developer.mozilla.org/uk/CSS/font

— diEcho

4

@diEcho, це справедливо для всіх елементів, крім елементів форми, які успадковуються від поточної стилістики системи, щоб вони підтримували відчуття, знайоме користувачеві ( за замовчуванням ), але вони можуть змінюватися вручну.

— Габріеле Петріолі

1

Неправильно чи ні, те, що Firebug показував мені, було дуже заплутаним: розмір шрифту 12, але обчислюється, він все-таки став 13,3333. Після встановлення розміру шрифту для успадкування, аналогічного відповіді Габі, моя проблема була вирішена: O

— Jeroen

@Gaby Це завжди так добре, що дизайнери змушують все думати для нас, розробників ...;)

— AGuyCalledGerald

Також якщо ви помістите inputвсередину label, labelтег не успадковує css за замовчуванням

— AmerllicA

16

Елементи форми (входи / textarea / тощо) не успадковують інформацію про шрифт. Вам потрібно буде встановити сімейство шрифтів для цих елементів.

— Джон Грін
джерело

@ jhon wat коли-небудь ур говорить може бути правдивим, чи є якийсь стандартний / дійсний документ щодо цього ??

— diEcho

елементи шрифту також не успадковують колір, фон тощо. Насправді елементи шрифту - це найнадійніша річ у всьому html / css! Ви не можете вказати ширину для поля введення, і гарантія буде однаковою для всіх браузерів!

— Ionuț Staicu

Я маю на увазі елементи форми. Ще сонний :)

— Ionuț Staicu

@diEcho - Чесно кажучи, я здійснив пошук за специфікаціями, і не бачу, що це викликано ніде. Переглядаючи "Пов'язане", і ТАК дає мені дублікат посилання на запитання: stackoverflow.com/questions/2874813 (який дає мою відповідь, хоча також не має специфічних посилань). Таблиця стилів за замовчуванням у Chrome перераховує шрифт як "-webkit-small-control;", що означає, що він вже переосмислює тіло, тому є більш конкретним, ніж усе, що встановлено на body. Те саме стосується елементів 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
джерело