如何为 HTML5 范围输入的每一侧设置不同颜色的样式？

为 HTML5 范围输入每侧设置不同的颜色

在 HTML5 范围输入的滑块之前和之后实现不同的颜色需要浏览器 -具体的

Chrome：

• 通过设置输入元素上的溢出：隐藏和宽度来隐藏默认滑块。
• 填充区域到拇指左侧并具有所需的背景颜色。
• 创建一个自定义滑块拇指并将其放置在右侧 80px 处拇指的自然位置。
• 确保自定义拇指大于输入的宽度，以完全覆盖默认拇指。

IE:

• 利用 ::-ms-fill-lower 伪元素将背景颜色设置为左侧拇指。
• 使用 ::-ms-fill-upper 设置拇指右侧的背景颜色。

Firefox:

• 利用 ::-moz-range-progress 伪元素设置左侧的背景颜色拇指。
• 使用 ::-moz-range-track 设置轨道的背景颜色。

示例代码：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    background-color: #9a905d;
  }

  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    color: #13bba4;
    margin-top: -1px;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    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;
}

<input type="range" />

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