我的页面上有一个,我用 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 上,当用户单击 slider 拇指时,图像周围会出现黑色边框。我该如何隐藏它?
最佳答案
您需要使用 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;
关于css - 输入类型 ="range"在 ipad 上单击时留下黑色边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19103886/