如何使用 CSS 将 HTML5 范围输入的每一侧设置为不同颜色？-css教程-PHP中文网

如何使用 CSS 将 HTML5 范围输入的每一侧设置为不同颜色？

Barbara Streisand

发布： 2024-12-19 20:05:20

原创

454 人浏览过

How Can I Style HTML5 Range Inputs with Different Colors on Each Side Using CSS?

将 HTML5 范围输入的样式设置为两侧不同的颜色

将 HTML5 范围输入的样式设置为在左侧和右侧具有对比色共同的请求。当用户与滑块交互时，颜色会动态变化，从而提供有关输入值的视觉反馈。在纯 CSS 中实现这种效果似乎是一个挑战，但这是可能的。

对于 Chrome，诀窍在于隐藏输入中的溢出并使用框阴影填充剩余部分具有所需颜色的空间。此技术有效地使用自定义颜色绘制滑块的左侧。

对于 IE 和 Firefox，我们可以利用内置 CSS 伪元素：

在 IE 中：::-ms-fill-lower 允许您设置滑块下部的样式，启用绿色颜色。
在 Firefox 中：::-moz-range-progress 为您提供类似的控制，允许您定义滑块填充部分的颜色。

要说明 CSS 解决方案，请参考以下代码：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    -webkit-appearance: none;
    background-color: #9a905d;
  }
  
  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
  }
  
  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    cursor: ew-resize;
    background: #434343;
    box-shadow: -80px 0 0 80px #43e5f7;
  }
}

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

登录后复制

使用此 CSS 代码，您可以设置 HTML5 样式范围输入以在滑块两侧显示不同的颜色，为您的 Web 应用程序创建具有视觉吸引力且用户友好的界面。

以上是如何使用 CSS 将 HTML5 范围输入的每一侧设置为不同颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！