输入类型“范围”的拇指样式在 IE 中不起作用

【问题标题】：Thumb styling for input type "range" not working in IE输入类型“范围”的拇指样式在 IE 中不起作用
【发布时间】：2020-04-27 18:06:14
【问题描述】：

我有以下用于设置拇指样式的 CSS。它在 chrome、Safari 和 firefox 上运行良好。但是，即使在 IE 10 及更高版本上也无法正常工作。拇指将保留其默认样式，就好像没有编写任何 CSS 来设置它一样。

input[type='range']::-webkit-slider-thumb, input[type='range']::-moz-range-thumb, input[type='range']::-ms-thumb {
  width: 30px;
  height: 30px;
  background: #FF6347;
}

【问题讨论】：

标签： css html internet-explorer css-selectors

【解决方案1】：

刚刚找出了这个问题的原因。我们不能用逗号分隔这些类型的选择器。我只是将它们隔离如下，它也开始为 IE 工作。由于 SASS 被用于聚合公共属性，因此正在聚合。

input[type='range']::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  background: #fff;
}

input[type='range']::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background: #fff;
}

input[type='range']::-ms-thumb {
  width: 30px;
  height: 30px;
  background: #fff;
}

【讨论】：