如何在 html5 input[type=range] 中实现背景颜色？答案

【问题标题】：how to achive background color in html5 input[type=range]?如何在 html5 input[type=range] 中实现背景颜色？
【发布时间】：2011-07-07 02:56:12
【问题描述】：

需要为 htmnl5 input[type=range] 控件着色。由于仅适用于 webkit，因此我根据许多网络资源的意愿设计了它。这是我为滑块设计的（输入 [type=range]）。

<input type="range"  name="rangeEl" value="20" min="0" max="150" step="1" />

css 是：

input[type=range] {
   border: 1px solid #4ba8b1;
margin: 0px 0px 5px 5px;
background:-webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA));
float:left;
pointer:cursor;
-webkit-appearance:none;
width:300px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
input[type=range]::-webkit-slider-thumb
{
   -webkit-appearance:none;
   border:1px solid #4ba8b1;
   background-color:#000;
   width:5px;
   height:5px;
}

现在的问题是滑块应该包含两种颜色，一种在拇指之前，另一种在拇指之后。我也想在滑块中获取该拇指的原始图像。这可能吗？

【问题讨论】：

在设置表单元素样式之前要三思。更多详情请阅读 Eric Meyer 的文章：Formal Weirdness。

标签： css

【解决方案1】：

设置表单元素的样式并非不可能，但是您必须覆盖很多浏览器默认样式，它们都是不同的，它们都采用不同的前缀规则，甚至有些东西仍然不能完美地工作。但这也不是不可能的。

在这种特殊情况下，您确实可以使用 background 或 background-image on 设置 input[type='range'] 仅在 Webkit 中的背景颜色：

input[type='range'] {}

您还可以设置滑块拇指的样式：

input[type='range']::-webkit-slider-thumb

你不能，AFAIK，在拇指之前有一种颜色，在拇指之后有一种颜色，默认的 HTML5 实现。为此，您需要使用更多自定义的 javascript 范围滑块之一，例如 JQuery UI。

【讨论】：