Question

需要为htmnl5输入[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;
}

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

Answer 1

对表单元素进行样式设置并非不可能，但是你必须覆盖浏览器默认样式的 lot ，它们都是不同的，它们都采用不同的前缀规则，甚至还有一些东西仍然不会完美。但这并非不可能。

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

input[type='range'] {}

您还可以使用以下方法设置滑块的样式：

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

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

如何在html5输入[type = range]中实现背景颜色？

1 个答案: