由于 ,此示例中的滑块应为红色background: red;
,但它仍然是蓝色:
.slider {
border: 0;
outline: 0;
width: 100px;
background: red;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
cursor: pointer;
}
.slider::-ms-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
cursor: pointer;
}
<input class="slider" type="range" min="0" max="100">
对于“类似 chrome”的浏览器,有必要
appearance: none
为伪元素和元素本身指定属性<input>
: