我的页面上有一个用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上,黑色边框环绕图像。我怎么隐藏这个?
答案 0 :(得分:0)
您需要使用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;
答案 1 :(得分:0)
我想出了我的问题。首先,感谢大家的帮助。
我忘了设置background-color:
属性。我将其设置为#FFF
,现在具有所需的效果。