input range滑动条样式自定义

最新推荐文章于 2024-06-24 09:25:01 发布

poetPg

最新推荐文章于 2024-06-24 09:25:01 发布

阅读量2.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42488404/article/details/81410671

版权

本文介绍了如何处理input[type='range']在Chrome、Firefox和IE浏览器间样式差异的问题，提供了一种方法统一样式，特别提到了IE9+的兼容性处理，并给出了相应的CSS样式和DOM操作示例，以实现定制化的滑动条样式。

摘要由CSDN通过智能技术生成

input[type="range"]的样式在谷歌，火狐，IE下的样式各不相同，而实际往往需要固定的样式，这里做了三个浏览器下样式处理，IE只支持9+。

上面是效果图。

首先清除浏览器默认的range样式。

 input[type=range]{
            width: 556px;
            height: 17px;
            outline: none;
            -webkit-appearance: none;/*清除系统默认样式*/
            background-color: #eaf5f9;
        }

接着修改滑块样式，下面是三个浏览器下的针对处理。

  input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;/*清除系统默认样式*/
            height:17px;/*拖动块高度*/
            width: 10px;/*拖动块宽度*/
            background: url("slide_block_03.png") no-repeat;