提问人：Sensei Usagi 提问时间：8/3/2023 最后编辑：mrtomblueSensei Usagi 更新时间：8/5/2023 访问量：49
输入类型范围滑块自定义拇指未显示在镶边中
Input type range slider custom thumb not showing up in chrome
问：
我有一些 css 代码用于类型范围的自定义输入。滑块背景显示得很好，但滑块拇指只能在 firefox 中正确显示（或者更确切地说是我的意图）。在合唱中，它仍然是默认的蓝色圆圈。
现在代码中可能有一些多余的东西，因为我正在测试很多以解决我的问题。 滑块样式的 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;
}<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>答：
0赞
mrtomblue
8/4/2023
#1
您还必须包含在实际滑块上才能禁用默认样式。-webkit-appearance: none;
但是，它不会显示在此片段中，因为我没有任何实际图像链接
/* General */
.Slider input[type="range"] {
-webkit-appearance: none;
appearance: none;
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;
background-color: transparent;
}
/* Firefox */
.Slider input[type="range"]::-moz-range-thumb {
width: 4px;
height: 11px;
background-color: transparent;
background: url(https://img.buzzfeed.com/thumbnailer-prod-us-east-1/30bc761b30c0414481db84df78bed152/BFV10402_Sliders4Ways.jpg) 0 -160px;
border-color: transparent;
}<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>评论
0赞
Sensei Usagi
8/7/2023
非常感谢。我不知道为什么我以前没有尝试过，因为我之前确实已经将其添加到拇指和可运行的轨道中。我也有点惊讶，我在搜索这个问题时找不到它。
评论