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; /*添加底部阴影*/
}
最新文章
- AVPlayer
- 解决hadoop启动后datanode无法启动问题
- 成都开发一个app大概好多钱？
- 『TCP/IP详解——卷一：协议』读书笔记——03
- 使用grunt打包ueditor源代码
- UTL_FILE详解
- postgresql 函数demo
- 史上比较用心的纯代码实现 AutoLayout
- ASP.NET MVC学习系列 WebAPI初探
- servlet核心API的UML图
- CAS5.2x单点登录(一)——搭建cas服务器
- Java第三阶段学习（九、类加载器、反射）
- java自学入门心得体会 0.1
- ROS launch启动文件的理解与编写
- 内核诊断（二）-- patch 和diff
- python中的Lock
- itchat个人练习 语音与文本图灵测试例程
- Node开发项目管理工具 Grunt 对比 Gulp
- （剑指Offer）面试题42：翻转单词顺序
- Python中基本的读文件和简单数据处理