在我的网站上实现input type range时,我遇到了一个问题。我尝试将-webkit-slider-thumb的背景颜色设置为透明,但在iOS设备(iPhone和iPad)的Safari浏览器上无法正常工作。 Safari检查器仍然显示用户代理样式,而不是我在css和内联html文件中实现的样式,以下是我在css文件和内联html中实现的样式:
HTML文件
<input class="slider" list="steplist" max="100" name="range" type="range" value ="0" />
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb:active{
background-color: transparent !important;
}
这是 iPad OS Safari 上检查元素的截图:
![enter image description here](https://istack.dev59.com/yOcOM.webp)
input[type="range"]::-webkit-slider-thumb
仍然是白色,而不是遵循我的透明CSS文件。
input[type="range"]{-webkit-appearance: none}
的重置样式,如果没有这些样式,浏览器将会使用默认/代理输入样式。 - herrstrietzel