Переопределить цвет фона материала css
Здравствуйте, я пытаюсь переопределить цвет фона материала. Я пробовал разные способы, но не могу изменить его.
с помощью инспектора в веб-браузере нашел css, который содержит то, что я хочу изменить
.form-control-wrapper .material-input::before {
position: absolute;
content: "";
width: 100%;
left: 0;
height: 2px;
background-color: #009587;
bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: -webkit-transform 0s;
transition: transform 0s;}
Я пытался изменить этот код, но цвет материала сохраняется, есть идеи? Спасибо
Добавление большего количества контента
<span class = "material-input"></span>
это имеет внутри события «до» и «после», часть «до» содержит цвет фона.
это html, вызывающий материал css:
<div class = "row">
<div class = "col-lg-8 col-lg-offset-2">
<div class = "input-group">
<span class = "input-group-addon"><span id = "icon" class = "mdi mdi-social-person"></span></span>
<input name = "message" id = "message" type = "text" class = "form-control" placeholder = "Choose an username" aria-describedby = "basic-addon1" maxlength = "768">
<span class = "input-group-btn">
<button id = "send" class = "btn btn-primary btn-flat">Connect</button>
</span>
</div>
могу ли я узнать, для какого html используется этот класс, если я получу более подробную информацию об этом, я могу вам помочь
что именно ты пробовал? пока ваш CSS объявлен после Material CSS и имеет достаточную специфичность, чтобы переопределить его, вы сможете применить свой стиль без использования !important... Также было бы полезно, если бы вы предоставили HTML-код для этого ввода, чтобы люди могли его протестировать. вне
спасибо за комментарий, я разместил html-код.
Мне не удалось воспроизвести проблему с вашим кодом; рассмотрите возможность добавления фрагмента, который показывает ввод в том виде, в котором он есть.
Ответы 2
Попробуйте использовать разметку !важный:
.form-control-wrapper .material-input::before {
position: absolute;
content: "";
width: 100%;
left: 0;
height: 2px;
background-color: #009587 !important;
bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: -webkit-transform 0s;
transition: transform 0s;
}
Это принудительно устанавливает это свойство над всеми остальными наборами.
спасибо за ваш быстрый ответ да, я попытался переопределить цвет материала
Не слушайте комментарий выше. Использование !important не лучшая практика. Чтобы переопределить стили материалов, которые не видны/не используются в html, вы должны использовать селектор псевдокласса ::ng-deep, и лучше использовать его с селектором :host.
:host {
::ng-deep {
.form-control-wrapper .material-input::before {
background-color: #009587;
}
}
}
попробуйте использовать "!important" следующим образом: background-color: #009587 !important;