输入类型=“范围”在ipad上点击时留下黑色边框

Question

我在我的页面上有一个，并且我用css对它进行了样式设置。

input[type=range] { 
    -webkit-appearance: none; 
    background-color: #1b2b66; 
    width: 300px; 
    height: 3px; 
    position: relative; 
    top: -9px; 
} 
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-image: url("../images/slider.png"); 
    background-size: 100% auto; 
    border: 0px; 
    width: 35px; 
    height: 35px; 
} 

问题是：在ipad上当用户单击滑块时，黑色边框围绕图像。我如何隐藏这个？

Answer 1

我想出了我的问题。首先感谢大家的帮助。

我忘了设置background-color:属性。我将它设置为#FFF，现在可以达到预期的效果。

Answer 2

您需要使用modernizr来执行特征检测。

<script src="modernizr.js"></script> 
<script>Modernizr.load({ 
    test: Modernizr.inputtypes.range, 
    nope: ['use your css to define the range input format'] 
}); 
</script> 

此测试寻找支持。当它失败时，它加载你的CSS来格式化输入。如果一个浏览器支持这个标签，这意味着将会有一个标准的方式来呈现这个控件，而你的css将是多余的。在这种情况下，我们通常只是让浏览器忽略我们的CSS设置。

如果你真的想覆盖默认的CSS设置。尝试使用!important。

border: 0 !important;