原创随心旅程随笔老人家的记忆卡片8 阅读 3 小时前
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>input[range] 样式改变 </title>
- <style>
- div {
- width: 500px;
- background: #000000;
- opacity: 0.5;
- height: 30px;
- }
- /* 横条样式 */
- input[type=range] {
- -webkit-appearance: none;
- /* 清除系统默认样式 */
- width: 100%;
- background: #61bd12;
- /* 设置左边颜色为 #61bd12, 右边颜色为 #ddd*/
- background-size: 100%;
- /* 设置左右宽度比例 */
- height: 3px;
- /* 横条的高度 */
- outline: none;
- }
- /* 拖动块的样式 */
- input[type=range]::-webkit-slider-thumb {
- -webkit-appearance: none;
- /* 清除系统默认样式 */
- height: 10px;
- /* 拖动块高度 */
- width: 5px;
- /* 拖动块宽度 */
- background: #fff;
- /* 拖动块背景 */
- }
- </style>
- </head>
- <body>
- <div>
- <input type="range">
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/50183/5914efc2bbbcb9876f67f0cc97b6a1af.html