html5范围选择,有没有办法设计HTML5的范围控制？

shakaran..

12

用于定制的CSS的完整示例(此时为webkit):

input[type="range"]{

background: rgb(94, 30, 30);

width: 130px;

height: 6px;

-webkit-appearance: none;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);

-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);

box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);

}

input[type="range"]:hover{

background: rgb(194, 139, 131);

width: 130px;

height: 6px;

-webkit-appearance: none;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);

-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);

box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);

}

input[type="range"]::-webkit-slider-thumb{

-webkit-appearance:none !important;

width:25px;

height:15px;

-webkit-appearance: none;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border:1px solid black;

background: #a90329;

background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%);

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019));

background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);

background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);

background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);

background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );

}

input[type="range"]::-webkit-slider-thumb:hover{

-webkit-appearance:none !important;

width:25px;

height:15px;

-webkit-appearance: none;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

background-color:rgb(56, 13, 13);

border:1px solid black;

background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));

background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);

background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);

background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);

background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );

}