纯CSS打造炫酷自定义范围滑块：无需JavaScript，兼顾可访问性
本文将演示如何仅使用CSS和原生的HTML <input type="range"> 元素创建自定义范围滑块，而无需依赖JavaScript，同时确保可访问性。教程涵盖了自定义输入元素的方法，包括重置和禁用浏览器默认样式、设置滑块样式以及使用border-image创建滑动渐变效果。此外，还将讲解如何添加细微动画来增强用户交互，例如点击时将滑块从仅边框的圆圈转换为完整的圆圈，以及悬停时颜色变暗。此技术保留了原生功能并支持键盘导航，为自定义范围滑块提供了一种多功能且易于访问的解决方案。
关键要点：
<input type="range"> 元素创建自定义范围滑块。border-image创建滑动渐变效果。默认的范围滑块样式并不美观。下图展示了Chrome、Firefox和Safari浏览器中默认范围滑块的显示效果：
然而，<input type="range"> 元素很难进行样式设置。大多数在线解决方案依赖于JavaScript和冗长的代码。更糟糕的是，一些技术还会破坏元素的可访问性。因此，让我们看看如何更好地利用纯CSS来实现，同时不影响可访问性。以下CodePen演示展示了我们将要构建的内容：CodePen链接
范围输入元素的结构
让我们先剖析范围输入元素的结构。它是一个原生元素，每个浏览器都有其自己的实现。主要有两种不同的实现：一种用于Webkit和Blink浏览器（如Chrome、Edge、Safari和Opera）：
<input type="range" min="0" max="100" step="1" value="20">
另一种用于Firefox：
<input type="range" min="0" max="100" step="1" value="20">
IE也有第三种实现，但幸运的是，这个浏览器现在几乎已经消失了！浏览器之间的这种不一致性使得任务变得困难，因为我们需要为每种实现提供不同的样式。我不会深入探讨这一点，因为这篇文章将永远写不完，但我强烈建议阅读Ana Tudor的这篇文章以进行更深入的探索（此处应插入文章链接）。您只需要记住，无论实现如何，“滑块”（thumb）始终是一个共同的组件。
我将只设置此元素的样式，这将使我的自定义范围滑块易于定制。让我们直接跳入代码中，看看神奇之处。
自定义输入元素
第一步是使用appearance: none和其他一些常用属性来重置和禁用所有浏览器默认样式：
<input type="range" min="0" max="100" step="1" value="20">
在更复杂的情况下，如果其他默认样式应用于我们的元素，我们可能需要添加更多代码。只需确保我们有一个没有任何视觉样式的“裸”元素即可。让我们还定义一些CSS变量，以便我们可以轻松地为范围滑块创建不同的变体：
<input type="range" min="0" max="100" step="1" value="20">
在此步骤中，只有滑块及其默认样式可见。
设置滑块元素样式
让我们设置滑块元素的样式。我们将从基本设置开始：
input {
appearance: none;
background: none;
cursor: pointer;
}使用border-image添加一些神奇效果
现在，我们将使用一个神奇的CSS技巧来完成我们的滑块。它涉及使用border-image：
input {
--c: orange; /* 活动颜色 */
--g: 8px; /* 间隙 */
--l: 5px; /* 线粗细 */
--s: 30px; /* 滑块大小 */
width: 400px; /* 输入宽度 */
height: var(--s);
appearance: none;
background: none;
cursor: pointer;
}通过添加overflow: hidden到输入元素并使用较大的值，幻觉就完美了。
添加一些动画
我们可以在与滑块交互时添加一些细微的动画吗？它不需要很多代码，并且会增强滑块的UX。首先，我们将点击时将滑块从仅边框的圆圈转换为完整的圆圈。为此，我们增加了box-shadow的spread值。
结论
我们已经完成了，并且不必处理任何复杂的浏览器相关实现！我们确定了滑块元素的选择器，并使用一些CSS技巧来设置整个范围滑块的样式。别忘了，我们只使用了<input type="range">元素，所以我们不必担心任何可访问性问题，因为我们保留了原生功能。滑块可以毫无问题地支持键盘导航。以下是用相同技术创建的更多滑块示例：CodePen链接
以上是如何使用CSS创建自定义范围滑块的详细内容。更多信息请关注PHP中文网其他相关文章！
