html5滚动条选择,HTML5 烟灰色的范围选择滑动条

CSS

语言：

CSSSCSS

确定

html {

background: #e6e6e6;

}

input[type='range'] {

box-sizing: border-box;

position: absolute;

top: 33%;

left: 50%;

padding: 0 0.25em;

width: 16em;

height: 1.5em;

border-radius: 0.75em;

/* set a background, white by default in Blink */

transform: translate(-50%, -50%);

/* make font-size consistent across browsers */

background: linear-gradient(#ccc, #fff) border-box;

font-size: 1em;

/* slider components */

/* slider variations */

/* slider states */

cursor: pointer;

}

input[type='range'],

input[type='range']::-webkit-slider-runnable-track,

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

-webkit-appearance: none;

}

input[type='range']::-webkit-slider-runnable-track {

/*

* set a border,

* solid 1px black by default in IE,

* no border in othr browsers

*/

box-sizing: border-box;

border: solid 1px #818181;

height: 0.875em;

border-radius: 0.4375em;

background: linear-gradient(#b0b0b0, #d5d5d5);

}

input[type='range']::-moz-range-track {

/*

* set a border,

* solid 1px black by default in IE,

* no border in othr browsers

*/

box-sizing: border-box;

border: solid 1px #818181;

height: 0.875em;

border-radius: 0.4375em;

background: linear-gradient(#b0b0b0, #d5d5d5);

}

input[type='range']::-ms-track {

/*

* set a border,

* solid 1px black by default in IE,

* no border in othr browsers

*/

box-sizing: border-box;

border: solid 1px #818181;

height: 0.875em;

border-radius: 0.4375em;

/* remove tick marks on track */

background: linear-gradient(#b0b0b0, #d5d5d5);

color: transparent;

}

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

margin-top: -0.0625em;

/*

* set a border,

* defaults different in every browser

*/

box-sizing: border-box;

border: solid 1px #818181;

width: 1.5em;

/*

* set a border-radius,

* rounded by default only in Firefox

*/

height: 1em;

border-radius: 0.25em;

/*

* set a background,

* defaults different in every browser

*/

box-shadow: inset 0 0.125em 0.125em #fcfcfc;

/* won't work in IE, kinda messsed in Chrome */

background: linear-gradient(#e0e0e0, #cecece);

cursor: ew-resize;

}

input[type='range']::-moz-range-thumb {

/*

* set a border,

* defaults different in every browser

*/

box-sizing: border-box;

border: solid 1px #818181;

width: 1.5em;

/*

* set a border-radius,

* rounded by default only in Firefox

*/

height: 1em;

border-radius: 0.25em;

/*

* set a background,

* defaults different in every browser

*/

box-shadow: inset 0 0.125em 0.125em #fcfcfc;

/* won't work in IE, kinda messsed in Chrome */

background: linear-gradient(#e0e0e0, #cecece);

cursor: ew-resize;

}

input[type='range']::-ms-thumb {

/*

* set a border,

* defaults different in every browser

*/

box-sizing: border-box;

border: solid 1px #818181;

width: 1.5em;

/*

* set a border-radius,

* rounded by default only in Firefox

*/

height: 1em;

border-radius: 0.25em;

/*

* set a background,

* defaults different in every browser

*/

box-shadow: inset 0 0.125em 0.125em #fcfcfc;

/* won't work in IE, kinda messsed in Chrome */

background: linear-gradient(#e0e0e0, #cecece);

cursor: ew-resize;

}

input[type='range']::-ms-fill-lower,

input[type='range']::-ms-fill-upper,

input[type='range']::-ms-tooltip {

display: none;

}

input[type='range']:nth-of-type(2) {

top: 66%;

}

.js input[type='range']:nth-of-type(2)::-webkit-slider-runnable-track {

background: linear-gradient(#fafafa, #bbb) no-repeat, linear-gradient(#b0b0b0, #d5d5d5);

background-size: 40% 100%, 100% 100%;

}

.js input[type='range']:nth-of-type(2)::-moz-range-track {

background: linear-gradient(#fafafa, #bbb) no-repeat, linear-gradient(#b0b0b0, #d5d5d5);

background-size: 40% 100%, 100% 100%;

}

.js input[type='range']:nth-of-type(2)::-ms-fill-lower {

display: block;

border-radius: 0.875em;

background: linear-gradient(#fafafa, #bbb);

}

input[type='range']:nth-of-type(2)::-webkit-slider-thumb {

margin-top: -0.1875em;

height: 1.25em;

background: repeating-linear-gradient(90deg, #bbb, #bbb 1px, rgba(187, 187, 187, 0) 2px, rgba(187, 187, 187, 0) 4px) no-repeat 50% 50%, linear-gradient(#ededed, #c9c9c9);

background-size: 65% 65%, 100% 100%;

}

input[type='range']:nth-of-type(2)::-moz-range-thumb {

height: 1.25em;

background: repeating-linear-gradient(90deg, #bbb, #bbb 1px, rgba(187, 187, 187, 0) 2px, rgba(187, 187, 187, 0) 4px) no-repeat 50% 50%, linear-gradient(#ededed, #c9c9c9);

background-size: 65% 65%, 100% 100%;

}

input[type='range']:nth-of-type(2)::-ms-thumb {

height: 1.25em;

background: repeating-linear-gradient(90deg, #bbb, #bbb 1px, rgba(187, 187, 187, 0) 2px, rgba(187, 187, 187, 0) 4px) no-repeat 50% 50%, linear-gradient(#ededed, #c9c9c9);

background-size: 65% 65%, 100% 100%;

}