html 圆圈滑动条,纯CSS3的一款滑动条（Slider）

CSS

语言：

CSSSCSS

确定

html {

height: 100%;

background: #fff;

}

[class*='-ms-']:before {

opacity: 0.15;

}

input[type='range'] {

box-sizing: border-box;

overflow: visible;

position: absolute;

-webkit-appearance: none;

top: 50%;

left: 50%;

width: 26em;

height: 4em;

padding: 0 0.5em;

border-radius: 0.625em;

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

/* Firefox & Chrome/ Opera need this,

otherwise font-size is smaller */

background: transparent;

font-size: 1em;

/* wish I could style this asshole */

cursor: pointer;

}

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

-webkit-appearance: none;

/* because IE */

border: none;

width: 25em;

height: 1.25em;

border-radius: 6.25em;

box-shadow: inset 0 1px 1px #e1e1e1, inset 0 0 0 0.5em #f5f5f5, inset 0 1px 1px 0.5em #a5a5a5, inset 0 -1px 0 0.5em #fff;

background: #ddd;

}

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

-webkit-appearance: none;

/* weird shit, Chrome */

margin-top: -0.25em;

border: none;

width: 1.75em;

height: 1.75em;

border-radius: 50%;

box-shadow: 0 0.25em 0.25em #b2b2b2, 0 0.25em 0.5em #b2b2b2, inset 0 -0.125em 0.125em #949494, inset 0 0 0 0.25em #bbb, inset 0 1px 0.125em 0.25em #676767;

background: #888;

}

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

/* fix Firefox WTF */

z-index: -1;

/* because IE */

border: none;

width: 25em;

height: 1.25em;

border-radius: 6.25em;

box-shadow: inset 0 1px 1px #e1e1e1, inset 0 0 0 0.5em #f5f5f5, inset 0 1px 1px 0.5em #a5a5a5, inset 0 -1px 0 0.5em #fff;

background: #ddd;

}

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

border: none;

width: 1.75em;

height: 1.75em;

border-radius: 50%;

box-shadow: 0 0.25em 0.25em #b2b2b2, 0 0.25em 0.5em #b2b2b2, inset 0 -0.125em 0.125em #949494, inset 0 0 0 0.25em #bbb, inset 0 1px 0.125em 0.25em #676767;

/* Firefox-only, it won't work in IE

and it's messed up in Chrome */

background: #888;

cursor: ew-resize;

}

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

/* because IE */

border: none;

width: 25em;

height: 1.25em;

border-radius: 6.25em;

box-shadow: inset 0 1px 1px #e1e1e1, inset 0 0 0 0.5em #f5f5f5, inset 0 1px 1px 0.5em #a5a5a5, inset 0 -1px 0 0.5em #fff;

background: #ddd;

color: transparent;

}

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

border: none;

width: 1.75em;

height: 1.75em;

border-radius: 50%;

box-shadow: 0 0.25em 0.25em #b2b2b2, 0 0.25em 0.5em #b2b2b2, inset 0 -0.125em 0.125em #949494, inset 0 0 0 0.25em #bbb, inset 0 1px 0.125em 0.25em #676767;

background: #888;

}

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

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

background: transparent;

}

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

display: none;

}

input[type='range']:focus {

outline: none;

box-shadow: inset 0 1px 0.25em #eee;

}