Question

您好，我正在尝试覆盖某种背景颜色，但是我尝试了各种方法仍无法更改它

在网络浏览器上使用检查器找到保存我想要更改的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>

此事件在before和after事件内部都有，before部分保留背景颜色。

这是调用CSS材料的html：

<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>

Answer 1

尝试使用标记！重要：

.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;
}

它会强制将此属性强加于所有其他设置

Answer 2

不听上面的评论。使用！important并不是最佳实践。要覆盖在html中不可见/未使用的材质样式，应使用:: ng-deep伪类选择器，最好与：host选择器一起使用。

:host {
    ::ng-deep {
        .form-control-wrapper .material-input::before {
            background-color: #009587;
        }
    }
}

覆盖背景色CSS

2 个答案: