input[type=range] {
-webkit-appearance: none;
width: 230px;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
display: block;
margin: 0 auto;
margin-top: 20px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px; /*将轨道设为圆角的*/
/*box-shadow: 0 1px 1px yellow, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
background: #6A8EF5;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 32px;
width: 32px;
margin-top: -8px; /*使滑块超出轨道部分的偏移量相等*/;
background-color: yellow;
background: url(../image/jb.png);
background-size: 100% 100%;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em yellow; /*设置边框*/
/* box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}

H5滑条(input type=range)的更多相关文章

  1. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  2. HTML5新特性——自定义滑动条(input[type="range"])

    HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...

  3. input type=range 进度条的自定义样式

    /* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ width: .8rem; backgro ...

  4. 美化input type=range标签滑动样式(带渐变效果)

    input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class=& ...

  5. CSS修改input[type=range]滑块样式

    input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...

  6. 利用定时器实时显示<input type="range"/>的值

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 改变input[type=range]的样式 动态滑动

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  8. 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)

    在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...

  9. H5新特性 input type=date 在手机上默认提示显示无效解决办法

    目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...

随机推荐

  1. enumerate()使用

    enumerate()使用 如果对一个列表,既要遍历索引又要遍历元素时,首先可以这样写: list1 = ["这", "是", "一个", ...

  2. [转]Java泛型

    一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...

  3. AIUI开放平台:多轮对话返回前几轮语槽数据

    编写云函数: AIUI.create("v2", function(aiui, err){ // 获取 response response = aiui.getResponse() ...

  4. jenkins使用(ubuntu16.0环境)

    本文总结了使用jenkins过程.大部分是网上链接,以后自已查看使用. ssh远程链接服务器 检查是否开启ssh   ps -ef|grep ssh 1.安装ssh 2.开启root用户 3.充许ro ...

  5. c++11 tuple实现

    实现一个简易版的c++11 tuple. 我使用的编译器是gcc,codeblocks13.12自带的,哪个版本我不熟gcc也没去查. 大致看了下他家的tuple实现,多继承,tuple之上还有2个辅 ...

  6. E212: Can't open file for writing Press ENTER or type command to continue

    E212: Can't open file for writing Press ENTER or type command to continue 出现这个错误的原因可能有两个: 1.当前用户的权限不 ...

  7. redis5.0.4 集群搭建

    准备工作用两台虚拟机模拟6个节点,一台机器3个节点,创建出3 master.3 salve 环境. redis 采用 redis-5.0.4 版本. 两台虚拟机都是 CentOS ,一台 CentOS ...

  8. wordpress 插件Simple Social Buttons import处漏洞复现

    前言: 漏洞范围范围:simple socail buttons v2.0.4到v2.0.22之间的所有版本 利用条件,wordpress的普通用户 漏洞细节:该插件缺少权限的检查,非管理管权限执行管 ...

  9. 源码:Java集合源码之:哈希表(二)

    要想知道一个元素是否在数组或链表中,只能从前向后挨个对比,无论是数组还是链表,其对数据的查询表现都比较无力.在的二叉排序树中,还会将数据排序以进行二分查找,将时间复杂度从O(n)降低到O(lg n). ...

  10. atop 分析小记

    atop分析小记 atop这个工具相当NB 项目中需要用到它的磁盘使用率统计值,为了一探究竟,挖了下它的代码 atopsar atopsar实际就是atop的一个链接指向. 从atop.c的main源 ...