Заполнитель семейства шрифтов ion-input Ionic5

#ionic-framework #styling #font-family

#ionic-framework #оформление #семейство шрифтов

Вопрос:

Я пытаюсь изменить семейство шрифтов placeholder из an <ion-input> .
В документах нет способа сделать это, поскольку единственными возможными вариантами для заполнителей являются --placeholder-color , --placeholder-font-style , --placeholder-font-weight и --placeholder-opacity .
Это HTML:

 <ion-input required 
           type="text" 
           maxlength="30"
           placeholder="Your username">
</ion-input>

Что я уже пробовал без успеха:

 ion-input::placeholder {
  font-family: 'My-font', sans-serif;
  --ion-font-family: 'My-font', sans-serif;
}

и я попытался заменить ::placeholder на ::-webkit-input-placeholder , :-ms-input-placeholder , :-moz-placeholder .

Чего я хотел бы достичь:

 ion-input {
  --placeholder-font-family: 'My-font', sans-serif;
}

1. Итак, вы хотите, чтобы семейство шрифтов вашего ввода отличалось от семейства шрифтов вашего текста-заполнителя?

2. @Wesley Нет, я хочу, чтобы у заполнителей было мое собственное семейство шрифтов

Ответ №1:

Шрифт-заполнитель просто наследуется от входного шрифта. Если ваш шрифт ввода и шрифт-заполнитель могут быть одинаковыми, просто примените стиль css к вашему элементу ввода.

 ion-input {
  --ion-font-family: 'My-font', sans-serif;
}