用CSS创建跨浏览器的range input

来源:互联网 发布:红色贵族知乎 编辑:程序博客网 时间:2024/06/15 18:33

http://www.w3cplus.com/html5/styling-cross-browser-compatible-range-inputs-css.html

CSS代码:::-webkit-slider-runnable-track {    border: 1px solid #a0b3d6;    background: #f0f3f9;}::-webkit-slider-thumb {    outline: 1px dotted #a0b3d6;    background-color: #34538b;}::-webkit-slider-runnable-track:hover {    background-color: #cad5eb;}::-moz-range-track {    border: 1px solid #a0b3d6;    height: 20px;    background: #f0f3f9;}::-moz-range-thumb {    background: #34538b;    height: 30px;}::-ms-fill-lower { background: orange; }::-ms-fill-upper { background: green; }::-ms-thumb { background: red; }::-ms-ticks-before { display: block; color: black; }::-ms-ticks-after { display: block; color: blue; }::-ms-track { padding: 5px; }::-ms-tooltip { display: none; /* 数值提示 只能是display或visibility */ }HTML代码:<input type="range" />
0 0
原创粉丝点击