更改css代码后，边框颜色和方框阴影颜色不变
更改css代码后，边框颜色和方框阴影颜色不变
提问于 2019-04-10 12:00:46
我导入了一个新西兰日期选择器，当鼠标悬停并聚焦在日期选择器元素上时，我想要更改边框颜色和框阴影颜色，我在元素的css类中更改了颜色，但不起作用
我在我的组件中导入了ng-zorro-antd模块，nz-date-picker运行正常，然后我打开F12找到nz-date-picker元素的类，并在我的组件scss文件中覆盖它，但它不起作用，我覆盖了..ant calendar-picker和..ant calendar-picker-input，不起作用。也许我覆盖了错误的类，但我可以在F12开发工具控制台上找到.ant-calendar-picker和.ant-calendar-picker-input。
我的scss代码：
:host ::ng-deep {
.ant-calendar-picker {
.ant-calendar-picker-input {
&:hover,
&:focus {
border-color: $primary-red;
box-shadow: none;
}
}
}
}或者像这样：
:host ::ng-deep {
.ant-calendar-picker {
&:hover,
&:focus {
border-color: $primary-red;
box-shadow: none;
}
}
}我可以看到我的css代码确实存在于chrome元素控制台上，但是我不知道为什么它不能工作
这是有效的，但没有帮助：
.ant-input {
&:hover {
border-color: $primary-red;
}
&:focus {
border-color: $primary-red;
box-shadow: none;
}
}我期望边框颜色和框阴影颜色可以在鼠标悬停并聚焦于nz-date-选择器元素时更改。
回答 1
Stack Overflow用户
发布于 2019-04-10 13:53:51
如果您想要在将鼠标悬停在元素上时更改Css，一开始元素必须具有此样式，然后当您将鼠标悬停在元素上时，您将更改它。例如：
.foo{
border:1px solid red;
}然后
.foo:hover{
border:1px solid green;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55604574
复制相关文章
相似问题
腾讯云开发者
