Font-family не наследуется полям ввода формы?

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

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/

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

35
css fonts forms html input

4 ответов

да, вам нужно поставить 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/

редактировать - объяснение добавил

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

42

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

почему

4

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

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

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

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

Smashing Magazine имеет статью что может помочь вам в дальнейшем.

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

1

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

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