设置input type=range滑块的CSS样式

range是HTML5里的input标签的新属性，type=”range”可以让input标签显示成一个滑块的样子

最新的浏览器基本都提供了支持，包括IE10，但是很遗憾的是，火狐仍然不支持，至少我现在使用的15依然

老实说，这是一个好东西，就是样子“屌丝”了一点。

给它整整容？

    
    
input[type="range"] {
    -webkit-box-shadow: 0 1px 0 0px #424242,
        0 1px 0 #060607 inset,
        0px 2px 10px 0px black inset,
        1px 0px 2px rgba(0, 0, 0, 0.4) inset,
        0 0px 1px rgba(0, 0, 0, 0.6) inset;
    margin-top: 2px;
    background-color: #272728;
    border-radius: 15px;
    width: 400px;
}

咦，怎么没效果？
这里需要用到一个属性-webkit-appearance。

-webkit-appearance的CSS属性用于webkit浏览器来显示一个元素使用平台的本地样式基于操作系统的主题。我们需要把这个属性干掉。其他浏览器都有对应的属性。

这个属性有很多值，不同的值可以让它显示不同的样子。

    
    
input[type="range"] {
    -webkit-appearance: none;
    -webkit-box-shadow: 0 1px 0 0px #424242,
        0 1px 0 #060607 inset,
        0px 2px 10px 0px black inset,
        1px 0px 2px rgba(0, 0, 0, 0.4) inset,
        0 0px 1px rgba(0, 0, 0, 0.6) inset;
    margin-top: 2px;
    background-color: #272728;
    border-radius: 15px;
    width: 400px;
}

那怎么设置上面滑块的样式呢？这里就要用到-webkit-slider-thumb这个元素了。（这个属性貌似现在只有webkit核心的浏览器支持）

    
    
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: default;
    top: 1px;
    height: 9px;
    width: 20px;
    background: none repeat scroll 0 0 #777;
    border-radius: 15px;
    -webkit-box-shadow: 0 -1px 1px black inset;
}

实例页面

原创文章，转载请注明： 转载自前端开发

本文链接地址: 设置input type=range滑块的CSS样式