Как использовать пользовательские шрифты для заполнителя ввода? - PullRequest
Новая
       10

Как использовать пользовательские шрифты для заполнителя ввода?

1 голос
/ 06 марта 2019

Я использую пользовательские шрифты (@ font-face), и они отображаются правильно в моем приложении полностью, за исключением ввода заполнителей .

Шрифт не отображается, а заполнительпусто.

Входной шрифт (когда я что-то печатаю) работает нормально.Кроме того, если я изменяю шрифт-заполнитель для системного шрифта (Arial, Tahoma ...), он тоже работает.

Как использовать пользовательские шрифты для заполнителя?

Ввод: 

<input placeholder="Search character" type="text" class="search-character">

CSS: 

body { font-family: 'DIN', sans-serif; }
.search-character::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-family: 'DIN', sans-serif;
}
.search-character::-moz-placeholder { /* Firefox 19+ */
  font-family: 'DIN', sans-serif;
}
.search-character:-ms-input-placeholder { /* IE 10+ */
  font-family: 'DIN', sans-serif;
}
.search-character:-moz-placeholder { /* Firefox 18- */
  font-family: 'DIN', sans-serif;
}
.search-character::placeholder {
  font-family: 'DIN', sans-serif;
}

Ответы [ 2 ]

0 голосов
/ 06 марта 2019 
input::placeholder { 
 font-family: Arial;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: Arial;
}

input::-ms-input-placeholder { /* Microsoft Edge */
  font-family: Arial;
}
0 голосов
/ 06 марта 2019

Применить свойство font-family к псевдоклассу ::placeholder . 

input::placeholder
{
    font-family: Helvetica;
}

Также обратите внимание, что input не наследует font-family по умолчанию из-за таблиц стилей пользовательского агента; посмотрите на этот фрагмент: 

body
{
  font-family: Impact, Haettenschweiler;
}

input::placeholder
{
  font-family: Impact, Haettenschweiler;
}
<input type="text" placeholder="hello" />

Заполнитель стилизован, а текст - нет.

...