html选择拖动条,纯CSS做的滑动范围选择条

CSS

语言：

CSSSCSS

确定

.frame {

position: absolute;

top: 50%;

left: 50%;

width: 400px;

height: 400px;

margin-top: -200px;

margin-left: -200px;

border-radius: 2px;

box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);

overflow: hidden;

background: #506172;

color: #fff;

font-family: 'Open Sans', Helvetica, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.center {

box-sizing: border-box;

position: absolute;

width: 300px;

height: 40px;

top: 180px;

left: 50px;

background: #fff;

border-radius: 3px;

box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.3);

padding: 5px 15px;

}

[type=range] {

-webkit-appearance: none;

margin: 0;

width: 270px;

height: 30px;

}

[type=range]:focus {

outline: none;

}

[type=range]::-moz-focus-outer {

border: 0;

}

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

width: 270px;

height: 4px;

cursor: pointer;

-webkit-transition: all .2s ease;

transition: all .2s ease;

background: #7AD175;

border: none;

border-radius: 2px;

box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);

}

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

border: 2px solid #7AD175;

height: 24px;

width: 24px;

border-radius: 24px;

background: #fff url(http://100dayscss.com/codepen/slider-thumb.png) center center no-repeat;

background-size: 50% 50%;

cursor: pointer;

box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);

-webkit-appearance: none;

margin-top: -10px;

}

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

width: 270px;

height: 4px;

cursor: pointer;

-webkit-transition: all .2s ease;

transition: all .2s ease;

background: #7AD175;

border: none;

border-radius: 2px;

box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);

}

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

border: 2px solid #7AD175;

height: 24px;

width: 24px;

border-radius: 24px;

background: #fff url(http://100dayscss.com/codepen/slider-thumb.png) center center no-repeat;

background-size: 50% 50%;

cursor: pointer;

box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);

}

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

width: 270px;

height: 4px;

cursor: pointer;

-webkit-transition: all .2s ease;

transition: all .2s ease;

background: transparent;

border-color: none;

color: transparent;

}

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

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

background: #7AD175;

border: none;

border-radius: 2px;

}

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

border: 2px solid #7AD175;

height: 24px;

width: 24px;

border-radius: 24px;

background: #fff url(http://100dayscss.com/codepen/slider-thumb.png) center center no-repeat;

background-size: 50% 50%;

cursor: pointer;

box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);

}