input[type = range]
来源:互联网 发布:九零后网络郑州网站 编辑:程序博客网 时间:2024/06/07 02:06
range是H5的新属性,常用编写进度条。
//HTML<input type="range" />//CSS/*1、去掉默认样式*/input[type=range] { -webkit-appearance: none; width: 400px; /*border-radius: 10px;*/ /*这个属性设置使填充进度条时的图形为圆角*/}input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;} /*2、添加track滑动样式*/input[type=range]::-webkit-slider-runnable-track { height: 10px; background: #ccc; border-radius: 10px; /*将轨道设为圆角的*/ /*轨道内置阴影效果*/ /*box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;*/}input[type=range]:focus { outline: none;}/* 3、给thumb滑块添加样式 */input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/ background: #108ee9; border-radius: 50%; /*外观设置为圆形*/ border: solid 1px rgba(205, 224, 230, 0.5); /*设置边框*/ box-shadow: 2px #fff; /*添加底部阴影*/}
阅读全文
0 0
- input[type = range]
- input[type=range]填充进度条问题
- 设置input type=range滑块的CSS样式
- html5 input type="range"实现拖拉滑条功能
- input type = "range"滑块和output的使用
- 自定义(滑动条)input[type="range"]样式
- 自定义(滑动条)input[type="range"]样式
- input[type="range"]是html5中的input标签新属性,样子如下:
- 利用定时器实时显示<input type="range"/>的值(附:JavaScript 装逼指南)
- input type=range样式设置,分别设置左右颜色,增大点击有效范围
- HTML5—————— 自定义(滑动条)input[type="range"]样式
- input type=“range”滑块自定义样式,实现步骤详解及实际应用
- input新类型type="range"的使用,针对样式的改写
- input type=image
- input type="file"
- input type=file
- input type=submit
- input type="checkbox"
- ShaderWeaver使用教程-火焰制作
- 第五周实践项目7 后缀表达式
- PowerDesigner16不显示comment列结局记录
- Android四大组件之Service
- 不同大小的字体底部对齐
- input[type = range]
- 简单实现Set To Map_java
- 基于zookeeper实现分布式锁
- jstack
- 安卓静默安装
- bash批量删除代码分支
- 微信小坑:更换applicationId,微信WXPayEntryActivity多渠道打包配置问题。
- MongoVUE的坑:Collections数据不显示
- 微信公众号开发 [01] 入门基本流程