Ionic 4: заполнитель ввода стиля
Я пытаюсь стилизовать заполнитель моего приложения Ionic 4. HTML выглядит следующим образом:
<form>
<ion-grid>
<ion-row class='label'>Name</ion-row>
<ion-row>
<ion-item>
<ion-input type='text' [(ngModel)]='recipe.name' name='name' placeholder='Name'></ion-input>
</ion-item>
</ion-row>
<ion-row class='label'>Weight</ion-row>
<ion-row>
<ion-item>
<ion-input type='number' [(ngModel)]='recipe.weight' name='weight' placeholder='Weight'></ion-input>
<ion-label>kg</ion-label>
</ion-item>
</ion-row>
</ion-grid>
</form>
Если пробовал Решения Ionic 2.x, пока не получилось.
Я понял, что если вы установите цвет в ионный элемент, он стилизует весь текст поля ввода
ion-item {
ion-input{
color:red;
}
}
при использовании псевдокласса : показанный заполнитель или псевдоэлемента :: заполнитель на ионный ввод, хотя стиль не оказывает никакого эффекта.
Что я делаю не так? Есть ли вообще возможность в Ionic 4 стилизовать заполнитель ввода?
Редактировать:
Stackblitz для форка с Ionic 4 и Angular 6
Ответы 3
Пожалуйста, попробуйте этот общий стиль, чтобы увидеть, имеет ли он какой-либо эффект:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder { /* IE 10+ */
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
Можете ли вы попробовать использовать! important в примере, показанном выше, только для целей тестирования /
Идеально работает при использовании !important: stackblitz.com/edit/ionic-x8d8vy?file=pages/home/ home.html
Да, но если вы используете его таким образом, это повлияет на весь веб-сайт, если вам нужно что-то более конкретное, вы можете настроить таргетинг на нужный класс и поставить в конце псевдоэлементы. Ваше здоровье!
Я добавил !важный за каждым красным. Но все еще безуспешно
Можете ли вы предоставить нам код CSS, лежащий в основе вашего проекта, или, что еще лучше, код или jsfiddle, чтобы точно увидеть, что там происходит. Один только html нам не очень помогает
@ לבנימלכה проблема в том, что ваш stackblitz является ionic 3, а мой проект работает на ionic 4
Да, я знаю, что не могу найти stackblitz с версией 4, но я думаю, что это то же самое
@TorjescuSergiu в процедуре больше нет css, кроме импорта по умолчанию ~ @ ionic import в global.scss
@ לבנימלכה если добавил stackblitz в конец моего вопроса
@MirJo Я скопировал код в stackblitz, и он не работает: stackblitz.com/edit/…
<ion-content padding> сверху и снизу нужно удалить, тогда он работает
Я не могу найти форму, указанную в вопросе, в примере stackblitz
@MirJo посмотреть мой ответ
Используйте этот код стиля:
ion-input{
--placeholder-color: red;
--placeholder-opacity: 1;
}
Смотрите здесь: https://stackblitz.com/edit/angular6-with-ionic4-list-refresh-test-yq3ntj?file=src%2Fapp%2Fapp.component.html
скажите мне, чтобы получить дополнительную помощь: :)
вы можете удалить важное из своего примера, и он по-прежнему работает
рад помочь :) (я нашел решение, см. в F12)
Некоторые компоненты, такие как datetime, используют вашу собственную структуру html. Поэтому я применил больше тегов, чтобы изменить все входные данные.
ion-datetime {
--placeholder-color: rgba(211, 211, 211, 0.4);
}
ion-input, ion-textarea, ion-select {
--placeholder-color: rgba(211, 211, 211, 1);
}
Я не понимаю, почему я использую разные альфа-значения ... но это сработало!
Никакого эффекта это не дало. Тем не менее черный текст и серый заполнитель