it-swarm.com.ru

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

Разве элементы ввода 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/

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

36
sunjie

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

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

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

44
Jason Gennaro

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

Почему <textarea> и <textfield> не принимают семейство шрифтов и размер шрифта из тела?

4
z0mBi3

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

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

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

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

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

Я надеюсь, что это помогает. 

1
Ryan

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

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
mehdi