如何在html5中加背景颜色,如何在html5輸入[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]).

需要為htmnl5輸入[type = range]控件着色。由於只在webkit中工作，我設計了它作為我的願望來自許多網絡資源。這是我為我的滑塊設計(輸入[類型=范圍])。

the css is:

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;

}

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?

現在問題是滑塊應該包含兩個顏色，一個在拇指之前，另一個在拇指之后。另外我想在滑塊中獲得該拇指的原始圖像。那可能嗎？

1 个解决方案

#1

0

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.

對表單元素進行樣式設置並非不可能，但是你必須覆蓋很多瀏覽器默認樣式，它們都是不同的，它們都采用不同的前綴規則，即使這樣，有些東西仍然無法完美運行。但這並非不可能。

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:

在這種特殊情況下，您確實可以使用背景或背景圖像在Webkit中設置輸入[type ='range']的背景顏色：

input[type='range'] {}

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

您還可以使用以下方式設置滑塊的樣式：

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

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.

你不能，AFAIK，在拇指之前有一種顏色，之后有一種顏色，默認的HTML5實現。為此，您需要使用更多自定義javascript范圍滑塊之一，如JQuery UI。