如何在不同浏览器中自定义 HTML5 范围输入滑块的外观？-css教程-PHP中文网

如何在不同浏览器中自定义 HTML5 范围输入滑块的外观？

Patricia Arquette

发布： 2024-12-25 18:12:11

原创

991 人浏览过

How Can I Customize the Appearance of HTML5 Range Input Sliders in Different Browsers?

为 WebKit 着色 HTML5 范围输入滑块

基于 WebKit 的浏览器显示具有一致外观的本机范围输入滑块。但是，添加自定义样式来修改此滑块的外观可能具有挑战性。

对于 Chrome：

溢出技巧： 隐藏通过设置溢出来默认滑块：隐藏在输入上。
阴影效果： 创建阴影效果，用所需的颜色填充拇指左侧的空间。

对于 IE 和 Firefox（原生支持）：

::-ms-fill-lower: 在 IE 中使用这个伪元素来填充拇指下方的区域。
::-moz-range-progress: 在 Firefox 中使用此伪元素填充拇指前面的区域。

CSS 代码实现：

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    -webkit-appearance: none;
    background-color: #9a905d;
  }

  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    cursor: ew-resize;
    background: #434343;
    box-shadow: -80px 0 0 80px #43e5f7;
  }
}

/* Firefox */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}

/* IE */
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

登录后复制

HTML示例：