为什么input :：-webkit-slider thumb，input :：-moz-slider thumb不工作？
为什么input :：-webkit-slider thumb，input :：-moz-slider thumb不工作？
提问于 2021-06-23 13:48:51
为ego支持创建一个小滑块不仅要在webkit浏览器中使用，还必须使用scss模板，比如
input {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 1vmin;
}
input::-webkit-slider-thumb {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
width: 2vmin;
height: 2vmin;
background: red;
}
input::-moz-range-thumb {
cursor: pointer;
-moz-appearance: none;
appearance: none;
width: 2vmin;
height: 2vmin;
background: red;
}<!DOCTYPE html>
<body>
<input type="range">
</body>
</html>
其中-webkit-slider thumb和-moz-range-thumb在不同的行上，但是为什么像这样的变体
input {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 1vmin;
}
input::-webkit-slider-thumb, input::-moz-range-thumb {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
width: 2vmin;
height: 2vmin;
background: red;
}<!DOCTYPE html>
<body>
<input type="range">
</body>
</html>
不起作用吗？我注意到只有引擎的属性才有这个特性。
回答 1
Stack Overflow用户
发布于 2021-06-23 14:13:29
它可以在火狐上运行(至少在我的Windows10笔记本电脑上是这样)。
在Chrome/Edge上，它不工作，正如问题中所指出的。
事实上，除-webkit之外的任何前缀似乎都会使整个选择器集无效或至少被忽略。
例如：
input::-webkit-slider-thumb, input::-webkit-range-thumb {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
width: 2vmin;
height: 2vmin;
background: red;
}滑块拇指的样式是正确的，但在以下情况下：
input::-webkit-slider-thumb, input::-rubbish-range-thumb {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
width: 2vmin;
height: 2vmin;
background: red;
}样式将被忽略。
更新：
我在MDN上发现了这张纸条
注意:通常，如果在选择器链或选择器组中存在无效的伪元素或伪类，则整个选择器列表都是无效的。如果一个伪元素(但不是伪类)有- WebKit -前缀，那么从Firefox63开始，Blink、WebKit和Gecko浏览器就会假定它是有效的，而不会使选择器列表无效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68094150
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号