CSS 用纯CSS样式化Webkit输入范围

在本文中，我们将介绍如何使用纯CSS样式化Webkit输入范围。

阅读更多：CSS 教程

什么是输入范围？

输入范围是HTML5中一种用于在网页中创建滑动条、控制调节器等交互元素的类型。当用户拖动滑块时，可以通过JavaScript监听事件来获取滑块的当前值，并进行相应的操作。

使用CSS样式化输入范围

在Webkit浏览器中，如Safari和Chrome，我们可以使用一些CSS属性来样式化输入范围。

首先，我们可以使用-webkit-appearance属性来去除默认的外观样式：

input[type="range"] {
  -webkit-appearance: none;
}

接下来，我们可以使用background属性来设置滑动条的背景颜色：

input[type="range"] {
  background: #ddd;
}

我们还可以使用::-webkit-slider-thumb伪元素来设置滑块的样式：

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

此外，我们可以使用::-webkit-slider-runnable-track伪元素来设置滑动轨道的样式：

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: #999;
}

这只是一个简单的示例，您可以根据需要进一步自定义样式。通过调整这些属性的值，您可以创建出各种不同的输入范围样式。

在不同浏览器上的兼容性

需要注意的是，使用-webkit前缀的CSS属性仅适用于Webkit浏览器，如Safari和Chrome。在其他浏览器上，这些样式可能无效。

为了在其他浏览器上实现相同的效果，您可能需要使用不同的前缀或添加额外的样式。例如，以下样式适用于Firefox浏览器：

input[type="range"] {
  -moz-appearance: none;
  background: #ddd;
}

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  background: #999;
}

因此，要实现跨浏览器兼容性，您可能需要编写一些特定于不同浏览器的CSS规则。

示例演示

<input type="range" min="0" max="100" step="5">

在上面的示例中，我们创建了一个范围输入框，取值范围从0到100，每次调整值的间隔为5。

总结

通过使用纯CSS，在Webkit浏览器中我们可以样式化输入范围，包括滑动条和滑块。我们可以使用-webkit-appearance、background、::-webkit-slider-thumb和::-webkit-slider-runnable-track等CSS属性和伪元素来自定义输入范围的外观。但需要注意的是，这些样式仅适用于Webkit浏览器，为了实现跨浏览器兼容性，可能需要编写特定于其他浏览器的CSS规则。