html里range怎么改样式,CSS之修改input range样式

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

今天来探讨一下 HTML5 的 range 这个新的 input 类型，不过重点不是在 range 要如何使用，而是在如何去改变 range 的样式，做出一个漂漂亮亮的滑动杆。

过去我们要制作美美的滑动杆 ( range slider )，不外乎就是用个 span 或 div ，搭配判断鼠标座标 ( pageX、pageY ) 与点击事件来制作，就算是 HTML5 具有了 range 的 input 类型，预设的样式只能满足基本的需求，对于有一些要求视觉设计的网站来说，根本就毫无用武之地，只好自己手动干一个 range slider 来用了。

虽然这篇会介绍两种修改 range 样式的方法，但由于 HTML5 与 CSS3 在各个浏览器之间仍然没有完全统一 ( 虽然之前好像就说标准制定完成了 )，所以要改变 range 的样式，仍然必须使用到各家浏览器自己的特有写法来调整，因此下列的范例，主要以 Chrome 为主，也会介绍 Firefox 的用法，至于 IE，能吃吗？哈哈哈~~

首先要来写一个 range 出来，min 是最小值，max 是最大值，step 是每隔间距，value 是预设数值：

如果没有意外，看到的长相就会是下面这个样子非常的….嗯…你懂的…

第一种方法

纯 CSS 的做法，由于 range 是 input 的一种类型，我们无法用传统的 CSS 编辑方法来修改样式，这里必须要使用到-webkit-appearance这个特殊属性，这是 webkit 特有的属性，代表使用系统预设的外观，可惜 W3C 到写这篇文章的时候，都还没有纳入规范 ( 不然 webkit 简直是神呀 )，只要我们将这个属性设为none，那么原本 range 的样式就不会呈现了，这时我们只要加入自己的背景、阴影…等样式，就可以看到样式被换过来了。input[type="range"]{

-webkit-appearance: none;

overflow:hidden;

width:200px;