如何使用两种不同的颜色（绿色和灰色）设置 HTML5 范围输入的样式？

使用不同颜色设计 HTML5 范围输入

问题：

要实现视觉上吸引人的范围输入，其中左侧一侧是绿色，右侧是灰色。

解决方案：

实现此效果需要特定于浏览器的样式。虽然纯 CSS 解决方案是可能的，但它们会根据目标浏览器而有所不同。

Chrome 的 CSS 解决方案：

• 隐藏输入[范围]中的溢出。
• 使用所需的左侧颜色填充拇指前面的空间

IE 的 CSS 解决方案：

• 使用内置 ::-ms-fill-lower 伪元素来设置左侧颜色。

CSS 解决方案Firefox:

• 使用内置 ::-moz-range-progress 伪元素设置左侧颜色。

示例代码：

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  box-shadow: -80px 0 0 80px #43e5f7;
}

/* IE */
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}

/* Firefox */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

此CSS代码确保范围输入的左侧是绿色，右侧保持灰色，提供所需的视觉效果。

以上是如何使用两种不同的颜色（绿色和灰色）设置 HTML5 范围输入的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！