html 滑块选择数量,HTML5 简单的范围输入控件/滑块

CSS

语言：

CSSSCSS

确定

html {

background: #f3f3f3;

}

input[type='range'] {

-webkit-appearance: none;

position: absolute;

top: 50%;

left: 50%;

border: none;

padding: 0 2em;

width: 22.25em;

height: 4em;

border-radius: 0.25em;

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

background: transparent;

font: 1em arial, sans-serif;

/* slider components */

cursor: pointer;

}

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

-webkit-appearance: none;

position: relative;

border: none;

height: 0.5em;

border-radius: 0.25em;

box-shadow: inset 0 1px 0.125em #e3e4e6, 0 0 0.125em #e3e4e6, 0 0 0.25em #e3e4e6, 0 0 0.5em #e3e4e6, 0 0 1em #e3e4e6;

background-color: #fff;

background: linear-gradient(#777, #777) no-repeat #fff;

background-size: 12.5% 100%;

}

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

border: none;

height: 0.5em;

border-radius: 0.25em;

box-shadow: inset 0 1px 0.125em #e3e4e6, 0 0 0.125em #e3e4e6, 0 0 0.25em #e3e4e6, 0 0 0.5em #e3e4e6, 0 0 1em #e3e4e6;

background-color: #fff;

background: linear-gradient(#777, #777) no-repeat #fff;

background-size: 12.5% 100%;

}

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

border: none;

height: 0.5em;

border-radius: 0.25em;

box-shadow: inset 0 1px 0.125em #e3e4e6, 0 0 0.125em #e3e4e6, 0 0 0.25em #e3e4e6, 0 0 0.5em #e3e4e6, 0 0 1em #e3e4e6;

background-color: #fff;

color: transparent;

}

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

border-radius: 0.25em;

background: #777;

}

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

background: transparent;

}

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

-webkit-appearance: none;

margin-top: -0.25em;

border: none;

width: 1em;

height: 1em;

border-radius: 50%;

box-shadow: 0 0 0.125em #d4d4d4, 0 0 0.125em #d4d4d4, 0 1px 0.125em white, 0 1px 0.125em white, 0 0.125em 0.125em #d4d4d4;

background: #f8f8f8;

}

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

border: none;

width: 1em;

height: 1em;

border-radius: 50%;

box-shadow: 0 0 0.125em #d4d4d4, 0 0 0.125em #d4d4d4, 0 1px 0.125em white, 0 1px 0.125em white, 0 0.125em 0.125em #d4d4d4;

background: #f8f8f8;

cursor: ew-resize;

}

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

border: none;

width: 1em;

height: 1em;

border-radius: 50%;

box-shadow: 0 0 0.125em #d4d4d4, 0 0 0.125em #d4d4d4, 0 1px 0.125em white, 0 1px 0.125em white, 0 0.125em 0.125em #d4d4d4;

background: #f8f8f8;

}

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

display: none;

}

input[type='range'] /deep/ #track:before {

position: absolute;

bottom: 1em;

font-size: 0.875em;

text-indent: 0.25em;

word-spacing: 1.65625em;

content: '0 5 10 15 20 25 30 35 40';

}

input[type='range']:focus {

outline: none;

box-shadow: 0 0 0.25em darkgrey;

}