H5滑条(input type=range)
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)的更多相关文章
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- HTML5新特性——自定义滑动条(input[type="range"])
HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
- input type=range 进度条的自定义样式
/* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ width: .8rem; backgro ...
- 美化input type=range标签滑动样式(带渐变效果)
input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class=& ...
- CSS修改input[type=range]滑块样式
input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...
- 利用定时器实时显示<input type="range"/>的值
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 改变input[type=range]的样式 动态滑动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)
在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...
- H5新特性 input type=date 在手机上默认提示显示无效解决办法
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...
随机推荐
- enumerate()使用
enumerate()使用 如果对一个列表,既要遍历索引又要遍历元素时,首先可以这样写: list1 = ["这", "是", "一个", ...
- [转]Java泛型
一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...
- AIUI开放平台:多轮对话返回前几轮语槽数据
编写云函数: AIUI.create("v2", function(aiui, err){ // 获取 response response = aiui.getResponse() ...
- jenkins使用(ubuntu16.0环境)
本文总结了使用jenkins过程.大部分是网上链接,以后自已查看使用. ssh远程链接服务器 检查是否开启ssh ps -ef|grep ssh 1.安装ssh 2.开启root用户 3.充许ro ...
- c++11 tuple实现
实现一个简易版的c++11 tuple. 我使用的编译器是gcc,codeblocks13.12自带的,哪个版本我不熟gcc也没去查. 大致看了下他家的tuple实现,多继承,tuple之上还有2个辅 ...
- 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.当前用户的权限不 ...
- redis5.0.4 集群搭建
准备工作用两台虚拟机模拟6个节点,一台机器3个节点,创建出3 master.3 salve 环境. redis 采用 redis-5.0.4 版本. 两台虚拟机都是 CentOS ,一台 CentOS ...
- wordpress 插件Simple Social Buttons import处漏洞复现
前言: 漏洞范围范围:simple socail buttons v2.0.4到v2.0.22之间的所有版本 利用条件,wordpress的普通用户 漏洞细节:该插件缺少权限的检查,非管理管权限执行管 ...
- 源码:Java集合源码之:哈希表(二)
要想知道一个元素是否在数组或链表中,只能从前向后挨个对比,无论是数组还是链表,其对数据的查询表现都比较无力.在的二叉排序树中,还会将数据排序以进行二分查找,将时间复杂度从O(n)降低到O(lg n). ...
- atop 分析小记
atop分析小记 atop这个工具相当NB 项目中需要用到它的磁盘使用率统计值,为了一探究竟,挖了下它的代码 atopsar atopsar实际就是atop的一个链接指向. 从atop.c的main源 ...