前言
今天做到了一个音视频的播放, 涉及到进度条, H5 元素的进度条十分丑陋, 所以这里做了一个美化的处理, 如下所示:
- /* 横条样式 */
- input[type=range] {
- -webkit-appearance: none;/* 清除系统默认样式 */
- width: 100%;
background: -webkit-linear-gradient(#df2727, #df4944) no-repeat, #ccc;/* 设置左边颜色为 #61bd12, 右边颜色为 #ddd*/
- background-size: 50% 100%;/* 设置左右宽度比例 */
- height: 3px;/* 横条的高度 */
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- }
- /* 拖动块的样式 */
- input[type=range]::-webkit-slider-thumb {
- -webkit-appearance: none;/* 清除系统默认样式 */
- height: 22px;/* 拖动块高度 */
- width: 22px;/* 拖动块宽度 */
- background: #fff;/* 拖动块背景 */
- border-radius: 50%; /* 外观设置为圆形 */
- border: solid 1px #ddd; /* 设置边框 */
- }
效果
效果图
来源: http://www.jianshu.com/p/da2332303982