0

我的页面上有一个，我用 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 上，当用户单击滑块时，图像周围会出现黑色边框。我该如何隐藏这个？

4

2 回答 2

0

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

我忘了设置background-color:属性。我将其设置为#FFF，现在有了预期的效果。

于 2013-09-30T21:34:52.903 回答
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;
于 2013-09-30T21:12:27.133 回答