webkit 范围输入中出现奇怪的白点

Question

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

我读了一篇关于这个的文章并从中得到了启发 (link)。

现在是演示。正如你所看到的，有一些白点我无法去除。

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;
}

<input type="range">

它一定很简单，但我仍在为此苦苦挣扎。

谢谢

Answer 1

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

尝试关注CSS

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

webkit 范围输入中出现奇怪的白点

Strange white dots in range input on webkit

css

webkit