Someone asked a question in the group this afternoon. Can I apply the custom style to the range element in HTML 5. After studying it at night, we can meet the above requirements. Use Chrome to view the Demo.
The Code is as follows:
Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Custom input [type = range] </title>
<Style type = "text/css">
# Range {
Width: 600px;
Height: 10px;
Background: rgba (60,114,230,. 8 );
Border: 1px solid #333;
-Webkit-border-radius: 5px;
-Webkit-appearance: none! Important;
}
# Range:-webkit-slider-thumb {
Width: 28px;
Height: 28px;
Background:-webkit-gradient (
Linear,
Left top,
Left bottom,
From (# fff ),
To (# ccc)
);
Border: 1px solid #000;
-Webkit-box-shadow: 0 0 6px #000;
-Webkit-border-radius: 14px;
-Webkit-appearance: none! Important;
}
# Result {
Border: 2px solid # ccc;
Width: 32px;
}
</Style>
</Head>
<Body>
<Input type = 'range' min = '0' max = '000000' value = '0' id = 'range'/>
<Input type = 'text' id = 'result'/>
<Script type = 'text/javascript '>
Var result = document. getElementById ('result ');
Document. getElementById ('range'). onchange = function (){
Result. value = this. value;
}
</Script>
</Body>
</Html>
"-Webkit-appearance: none!" in the code! Important "is very important. You must first set-webkit-appearance to none to customize the style.
Author: Zhou Zhi
Http://www.ued163.com /? P = 1286