Materialize - изменение цвета полей ввода по умолчанию
Я новичок в Materialise и Angular. У меня тот же вопрос, что и в этой теме Измените цвет полей ввода materialize.css по умолчанию. я приложил скриншот
Однако решения не отвечают на вопрос. Я реализовал этот код в styles.css:
input:focus {
border-bottom: 1px solid #005DAB !important;
box-shadow: 0 1px 0 0 #005DAB;
}
label:active {
color: #005DAB;
}
Вот что я вижу:
Я вижу, что нижняя граница меняется на синюю (это то, что я хотел). Однако метка временно меняется на синюю (я предполагаю, что пока она активна), а затем снова становится бирюзовой.
Как сделать так, чтобы выбранная метка оставалась синей (#005DAB).
Ответы 2
Эй, проблема здесь в том, что правила CSS по умолчанию для материализации перевешивают пользовательское правило, которое вы определили.
Подробнее об этом можно прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Короче говоря, наиболее конкретное правило перезаписывает другое, поэтому, чтобы ваше изменение появилось, вам нужно сделать ваше правило более конкретным.
Есть несколько способов сделать это, например, использовать идентификатор в селекторе или добавить !important к вашему правилу.
Однако эти методы не рекомендуются, вы можете переписать исходное правило CSS или добавить собственный класс, чтобы добавить веса вашему селектору.
<div class = "input-field col s12 label-color-alternate">
<input id = "password" type = "password" class = "validate">
<label for = "password" class = "">Password</label>
</div>
Например, я добавил класс «label-color-alternate» во внешний div, если мы добавим этот класс в наш селектор, это даст нам необходимую специфичность.
div.row > div.input-field.label-color-alternate > input+label.active {
color: #005DAB;
}
Конечно, вы можете поэкспериментировать с тем, как лучше написать свой селектор и к каким элементам вы хотите добавить пользовательские классы.
Надеюсь, это поможет !
установите это в свой внешний css:
input[type=text]:not(.browser-default):focus:not([readonly]) {
border-bottom: 2px solid var(--yourcolor);
box-shadow: 0 0 0 0 var(--yourcolor);
}
Это в конечном итоге ответило на мой вопрос. Я не уверен, что являюсь большим поклонником Materialise, но, по крайней мере, я научился этому. Спасибо за ответ на мой вопрос!