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;
}