如何解决Webkit 阻止了我在 scss 中添加 classNames 的能力
这有效:
.slider {
-webkit-appearance: none;
appearance: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: $havenAccent;
cursor: pointer;
&.--disabled {
background: gray;
}
}
这不起作用:
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: $havenAccent;
cursor: pointer;
&.--disabled {
background: gray;
}
}
当我在两个示例中滚动“--disabled”时,我会看到“.slider --disabled”。 我希望能够更改具有 '.slider::-webkit-slider-thumb' 的示例的背景颜色
解决方法
如何使用:
.slider {
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: $havenAccent;
cursor: pointer;
}
&.--disabled::-webkit-slider-thumb {
background: gray;
}
}
我将 .slider
类上移了一级,以便 ::-webkit-slider-thumb
伪元素和类 .---disabled
都可以使用它,并且作为 ::-webkit-slider-thumb
它必须重复。
这将输出以下css:
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: #someColor;
cursor: pointer;
}
.slider.--disabled::-webkit-slider-thumb {
background: gray;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。