如何achive背景颜色在html5输入[type = range]？ [英] how to achive background color in html5 input[type=range]?

问题描述

需要为htmnl5输入[type = range]控件着色。因为只有在webkit中的工作，我设计它作为我的愿望从许多web sources.here是我为滑块设计的（输入[type = range]）。

Ineed to color the htmnl5 input[type=range] controls. Since works only in webkit i designed it as my wish from many web sources.here is what i designed for my slider(input[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;
}

现在问题是滑块应该包含两个颜色和一个在拇指后。 ALso我想得到的拇指在滑块的原始图像。这是可能的吗？

Now the problem is the slider should contain two color one which is before the thumb and one which is after the thumb. ALso i want to get the original image of that thumb in slider. Is that possible?

推荐答案

这是不可能的样式表单元素，但你必须覆盖< >的浏览器默认样式，它们都是不同的，他们都采取不同的前缀规则，即使一些事情仍然不会完美。

It's not impossible to style form elements, but you have to override a lot of browser default styles, and they're all different, and they all take different prefixed rules, and even then some things still won't work perfectly. But it's not impossible.

在这种特殊情况下，你可以设置 input [type ='range'] 仅在Webkit中使用background或background-image：

In this particular case, you can indeed set the background color of the input[type='range'] in Webkit only using background or background-image on:

input[type='range'] {}

您也可以使用以下方式设置滑块缩略图的样式： p>

You can also set the style of the slider thumb with:

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

您不能，AFAIK，在缩略图之前有一种颜色，一种颜色，默认HTML5实现。为此，您需要使用更多自定义的JavaScript范围滑块（如JQuery UI）。

You cannot, AFAIK, have one color before the thumb and one color after, with the default HTML5 implementation. For that, you'll need to use one of the many more customized javascript range sliders like JQuery UI's.

这篇关于如何achive背景颜色在html5输入[type = range]？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！