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

Не используются ли элементы ввода формы 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/

Общеизвестно, что мы должны переопределить семейство шрифтов для полей ввода, или я делаю что-то неправильно?

Ответы

Ответ 1

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

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

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

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

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

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

EDIT - добавлено объяснение

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

Ответ 2

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

Почему <textarea> и <textfield> не брать шрифт-семью и размер шрифта из тела?

Ответ 3

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

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

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

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

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

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

Ответ 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;
}