css - 输入类型 "range"的缩略图样式在 IE 中不起作用

Question

我有以下用于设置拇指样式的 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;
}

Answer 1

刚弄清楚这个问题的原因。我们不能用逗号分隔这些类型的选择器。我只是将它们隔离如下，它也开始为 IE 工作。因为 SASS 被用来聚合公共(public)属性，所以得到这个聚合。

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