进度条 input[type="range"

作者: 如风_周 | 来源:发表于2017-04-18 09:47 被阅读760次

进度条 input[type="range"
input type="checkbox"
input type="search"
安卓、IOS按钮兼容
2017-12-28 css 苹果手机表单兼容
input
input去掉原始样式
苹果微信浏览器 button input 发白
<input type="file"&
input type="search" 实现

项目中引入一个video视频播放插件,因项目需要更改样式，查询好久的资料特地把如何视频播放进度条修改样式分享出来(chrome浏览器)

使用说明:

    input[type="range"] 为选择进度条样式
    input[type=range]:focus 去除进度条边框
    input[type="range"]::-webkit-slider-thumb 进度条按钮样式

效果图

type[text='range'].png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style >
        .a input[type="range"] {
            /*滑动条背景*/
            -webkit-appearance: none;
            background-color: rgba(115, 133, 159, 0.5);
            height: 5px;
        }
        
        .a input[type=range]:focus {
            /*滑动条选择后外边距*/
            outline: none;
        }
        
        .a input[type="range"]::-webkit-slider-thumb {
            /*滑动条操作按钮样式*/
            -webkit-appearance: none;
            border-radius: 5px;
            background: red;
            width: 10px;
            height: 11px;
        }
    </style>
</head>

<body>
    <div>
        <input type="range">
    </div>
    <div class="a">
        <input type="range">
    </div>
</body>

</html>