Question

我试图在webkit上设置范围输入的样式。在Firefox上一切正常，但webkit在轨道周围显示奇怪的白点。

我读了一篇关于此的文章并从中获取灵感（link）。

现在这是演示。正如你所看到的，有些白点我无法摆脱。

＆＃13;

body {
  padding: 30px;
  background-color: black;
}
input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*required for proper track sizing in FF*/
  width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: black;
  border: none;
  border-radius: 3px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
  margin-top: -4px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

＆＃13;

<input type="range">

＆＃13;

它必须非常简单，但我仍然在努力解决这个问题。

谢谢

Answer 1

您有四个点的原因是输入标签具有默认背景颜色。即来自用户代理样式表的 background-color：white; 。

尝试使用CSS

input[type=range] {
  -webkit-appearance: none;
  border: 0px;
  width: 300px;
  background-color: transparent;
}

webkit上的范围输入中有奇怪的白点

1 个答案: