拇指造型的输入类型“范围”不工作在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被用于聚合共同属性而得到这个总和。

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