html5中，input 的属性type="range",样式怎样美化？

top慢慢 2015-12-29 03:16:05

现在做手机端，用到<input class="ii" type="range" id="trackBar" min="0" max="500" step="10" value="10" />
可是这个的样式应该怎样美化，在网上搜索的，在谷歌浏览器测试手机效果时候，发现没效果啊。有人可以告诉我怎样修改这个样式，在手机里会有效果。我想修改滑块的效果，进度条的效果以及滑块划过的进度条效果。。
轻请大神指点。

...全文

6551 6 打赏收藏转发到动态举报

写回复

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

PerfectKim 2017-11-10

打赏
举报

回复

这个很好做啊！不要按照默认的。不能去更改，自己写div然后写拖拽。判断边界。同步更新到你的视频。

业余草 2016-01-04

打赏
举报

回复

http://www.xiaoxiangzi.com/Programme/CSS/3426.html

业余草 2016-01-04

打赏
举报

回复

http://cssass.com/blog/2010/702.html

业余草 2016-01-04

打赏
举报

回复

http://www.zhangxinxu.com/study/201008/html5-range-input.html

okkk 2016-01-04

打赏
举报

回复

支持2楼，想要好看用DIV自己做吧。只是必须要js支持。

hercules135 2015-12-29

打赏
举报

回复

这个东西貌似每个浏览器都是自己的样子...

自定义(滑动条)input[type="range"]样式；完成以下的五个步骤：去除系统默认的样式；给滑动轨道(track)添加样式；给滑块(thumb)添加样式；根据滑块所在位置填充进度条；实现多浏览器兼容。

对应博客：http://blog.csdn.net/u013347241/article/details/51560290

课程目标：本课程带领大家详细的学习CSS特性，为移动端和响应式打基础课程简介：1，语义标签2，视频3，音频4、新增input类型5、新增表单元素6，HTML表单验证7，新增表单属性8，html的全局属性9，边框圆角10，盒子阴影11、文本12，颜色新增13,、不透明度14，渐变15、盒子尺寸16，背景17，web字体引用18、2D 转换19、过渡20、动画21、CSS3弹性伸缩布局22、CSS3多列布局23、3D旋转

什么是Input Range Input Range 对象是 HTML5 新增的。Input Range 对象表示使用 type=range 属性的 HTML <input> 元素。注意： Internet Explorer 9及更早IE版本不支持使用 type=range 属性的 HTML <input> 元素。. 访问 Input Range 对象你可以使用 getElementById() 函数来访问使用 type=range 属性的 <input> 元素: var x = document.getElementById(myRange); 尝试一下提示：你同样可以

你可能已经听说过，HTML5里引入了几种新的input类型。在HTML5之前，大家熟知的input类型包括：text(输入框)，hidden(隐藏域)，submit(提交按钮)等。而HTML5到来之后，新增的input类型包括：number(数字)，date(日期)，color(颜色)，range(范围)等等。网上之所以还没有大量的出现对这些新型的input类型的使用，是因为还有很多人在使用古老的IE6/IE8，只有当使用这些古老浏览器的人所占的比例可以忽略不计时，那就是HTML5主导天下之日，那天也是我们Web开发人员的新纪元的开始。下面是这几种新型input类型的实例演示，可能在不同的浏览器上它们的样式会稍微有些变化，但基本的功能都是一样的。 html5中的新型input类型数字型 type=”number” <input type="number"> 效果：日期型 type=”date” <input type="date"> 效果：颜色选择器 type=”color” <input type="color"> [......] 阅读全文>>

39,085

社区成员

5,548

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章