Семейство шрифтов не наследуется от полей ввода формы?

Question

Разве элементы ввода html-формы, такие как поле ввода текста или поле выбора, автоматически не наследуют свойство font-family из тела? Например:

body {
 font-family:'Lucida Casual', 'Comic Sans MS';
}

Он не будет использовать вышеуказанный шрифт в поле ввода формы ниже:

<form> 
   <div>
        <label for="name">Name</label>  
        <input id="name" name="name" type="text" />  

   <div>
</form>

Пожалуйста, посмотрите на http://jsfiddle.net/3fkNJ/

Часто ли нам приходится переопределять семейство шрифтов для полей ввода, или я делаю что-то не так?

Answer 1

Да, вам нужно поместить font в тег input.

input{
  padding:5px;
  font-size:16px;
  font-family:'Lucida Casual', 'Comic Sans MS';    
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

Вы также можете использовать inherit для установки font в полях form.

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

http://jsfiddle.net/jasongennaro/3fkNJ/7/

РЕДАКТИРОВАТЬ - объяснение добавлено

Большинство браузеров отображают текст внутри form элементов как текст операционной системы пользователя. Это сделано для того, чтобы, насколько я понимаю, общий взгляд на пользователя. Однако все это может быть перезаписано приведенным выше кодом.

Answer 2

в коде нет ничего плохого. Это часто встречается, поскольку поле ввода принимает настройки темы ОС по умолчанию. Это уже обсуждалось в stackoverflow. Посмотрите на ссылку ниже для более подробной информации.

Почему и не извлекают семейство шрифтов и размер шрифта из основного текста?

Answer 3

Попробуйте изменить атрибут тела тела на

body *{font-family:'Lucida Casual', 'Comic Sans MS';}

* заставляет каждый дочерний элемент наследовать указанное значение в правиле CSS, которое вы написали, из-за правил CSS над спецификацией.См. скрипку здесь

Это удобно, если вы хотите, чтобы каждый элемент на вашей странице имел одинаковое значение семейства шрифтов, не очень удобно, если вы хотите, чтобы ваши формы имели другое значение.

В Smashing Magazine есть статья , которая может помочь вам в дальнейшем.

Надеюсь, это поможет.

Answer 4

у меня сработало:

tags-input *, tags-input *:before, tags-input *:after {
  font-family: "IRANSans" !important;
}

tags-input .tags .input {
  padding-right: 5px;
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}

tags-input .tags .tag-item {
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}