我可以仅使用 CSS 为 HTML5 范围输入设置两种不同颜色的样式吗？-css教程-PHP中文网

我可以仅使用 CSS 为 HTML5 范围输入设置两种不同颜色的样式吗？

Linda Hamilton

发布： 2024-12-19 19:12:10

原创

390 人浏览过

Can I Style an HTML5 Range Input with Two Different Colors Using Only CSS?

使用不同颜色设置 HTML5 范围输入的样式

问题：

是否可以设置样式HTML5 范围输入在滑块两侧具有不同的颜色？例如，左边是绿色，右边是灰色？理想情况下，首选纯 CSS 解决方案，兼容 WebKit 浏览器。

解决方案：

当然，用纯 CSS 实现这种定制是可行的。我们的解决方案利用特定于浏览器的 CSS 属性来针对不同的浏览器：

Chrome:

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

登录后复制

Firefox:

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

登录后复制

互联网Explorer:

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

登录后复制

HTML 片段:

<input type="range"/>

登录后复制

此代码片段将创建一个左侧为绿色、右侧为灰色的范围输入。为了在所有主要浏览器中获得完整功能，请确保包含所有提供的特定于浏览器的代码块。

以上是我可以仅使用 CSS 为 HTML5 范围输入设置两种不同颜色的样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！