Изменение семейства шрифтов для заполнителя

Возможно ли, чтобы поле ввода имело одно семейство шрифтов, а другое - другое?

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

CSS

.mainLoginInput::-webkit-input-placeholder { 
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-moz-placeholder { 
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

HTML

<input class="mainLoginInput" type="text" placeholder="Username"  />

Как я могу решить эту проблему?

Ответы

Ответ 1

Нашел...

Префиксом для пользователей Firefox 19+ является ::-moz-placeholder

И код выглядит так:

.mainLoginInput::-moz-placeholder {
   font-family: 'myFont', Arial, Helvetica, sans-serif;  
}

Ответ 2

В случае, если кто-то хочет, чтобы селектора-заполнители для всех браузеров:

.mainLoginInput::-webkit-input-placeholder {
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-ms-input-placeholder {
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-moz-placeholder {
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput::-moz-placeholder {
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

Ответ 3

Вот полное использование псевдоэлемента ::placeholder:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
 color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
 color: pink;
}
:-moz-placeholder { /* Firefox 18- */
 color: pink;
}

Все заполнители в Firefox имеют значение непрозрачности, применяемое к ним, поэтому, чтобы исправить это, нам нужно reset это значение:

::-moz-placeholder {
  opacity: 1;
}

Источник

Ответ 4

Просто так

.mainLoginInput::placeholder{
     font-family: -Your font here-;
}

Ответ 5

Используйте это для основной поддержки браузера:

HTML:

<input type="text" placeholder="placeholder text.." class="mainLoginInput" />

CSS:

.mainLoginInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: 'myFont', Arial, Helvetica, sans-serif;
  opacity: 1; /* Firefox */
}

.mainLoginInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput::-ms-input-placeholder { /* Microsoft Edge */
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

Подробная ссылка ссылка