CSS: Modify the input [type = range] slider style, inputrange
Input [type = "range"] is a new attribute of the input tag in html5, as shown below:
<Input type = "range" value = "40"/>
How can I make this slider effect as shown in?
The following is the style section:
<Style type = "text/css">
Input [type = "range"] {
-Webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba (0, 0, 0, 0.4) inset, 0 0px 1px rgba (0, 0, 0, 0.6) inset;
Margin-top: 2px;
Background-color: #272728;
Border-radius: 15px;
Width: 400px;
-Webkit-appearance: none;
Height: 10px;
}
Input [type = "range"]:-webkit-slider-thumb {
-Webkit-appearance: none;
Cursor: default;
Top:-5px;
Height: 30px;
Width: 20px;
Transform: translateY (-4px );
Background: none repeat scroll 0 0 0 #777;
Border-radius: 15px;
-Webkit-box-shadow: 0-1px 1px black inset;
}
</Style>
