Chrome中自定义Input type range滑块thumb不显示问题求助

自定义Input type range的CSS后，滑块背景显示正常，但滑块thumb仅在Firefox中按预期显示，Chrome中仍为默认蓝色圆形。现有代码存在冗余，以下是问题代码及修正方案：

原始问题代码 #

CSS #

/* General */

.Slider input[type="range"] {
  width: 100px;
  height: 13px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  background: url(./assets/img/Special_Menu.png) 0 -145px;
  border-color: transparent;
}


/* Chrome */

.Slider input[type="range"]::-webkit-slider-runnable-track {
  background: url(./assets/img/Special_Menu.png) 0 -143px;
}

.Slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 11px;
  background: url(./assets/img/Special_Menu.png) 0 -160px;
}


/* Firefox */

.Slider input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 11px;
  background-color: transparent;
  background: url(./assets/img/Special_Menu.png) 0 -160px;
  border-color: transparent;
}

HTML #

<div class="Menu">
  <div id="SFX"></div>
  <div class="Slider">
    <input type="range" min="0" max="100" />
  </div>
  <div id="Music"></div>
  <div class="Slider">
    <input type="range" min="0" max="100" />
  </div>
</div>
</div>

问题原因 #

Chrome的::-webkit-slider-thumb仅设置-webkit-appearance: none不足以完全清除默认样式，默认的蓝色边框会覆盖自定义背景图；同时原始代码存在冗余样式，比如通用规则里的border-color: transparent对webkit内核无效。

修正后的代码 #

CSS #

.Slider input[type="range"] {
  width: 100px;
  height: 13px;
  margin: 0 auto;
  display: block;
  background: url(./assets/img/Special_Menu.png) 0 -145px;
  /* 清除Chrome/Firefox默认基础样式 */
  -webkit-appearance: none;
  border: none;
}

/* Chrome/Safari/Webkit内核 */
.Slider input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 13px;
  background: url(./assets/img/Special_Menu.png) 0 -143px;
}

.Slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 11px;
  border: none; /* 彻底清除Chrome默认蓝色边框 */
  background: url(./assets/img/Special_Menu.png) 0 -160px;
  margin-top: 1px; /* 可选：根据图片调整垂直对齐 */
}

/* Firefox */
.Slider input[type="range"]::-moz-range-track {
  background: url(./assets/img/Special_Menu.png) 0 -143px;
  height: 13px;
  border: none;
}

.Slider input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 11px;
  border: none;
  background: url(./assets/img/Special_Menu.png) 0 -160px;
}

HTML（修正多余闭合标签） #

<div class="Menu">
  <div id="SFX"></div>
  <div class="Slider">
    <input type="range" min="0" max="100" />
  </div>
  <div id="Music"></div>
  <div class="Slider">
    <input type="range" min="0" max="100" />
  </div>
</div>

关键修改点 #

1. 给基础input[type="range"]添加-webkit-appearance: none和border: none，清除跨浏览器默认基础样式
2. 给::-webkit-slider-thumb添加border: none，彻底移除Chrome默认的蓝色边框
3. 简化margin写法（margin: 0 auto替代四个方向的单独设置）
4. 补充Firefox的::-moz-range-track样式，确保滑块背景在Firefox中统一
5. 移除冗余的background-color: transparent（直接使用背景图即可）

内容的提问来源于stack exchange，提问作者Sensei Usagi