提问人：Beginner Professional 提问时间：10/1/2023 最后编辑：Beginner Professional 更新时间：10/2/2023 访问量：75
我想更改输入[范围]上的刻度线的颜色
I want to change the color of the tick marks on input[range]
问：
我想知道什么。
我想在 HTML 中创建和自定义滑块。
虽然各种网站都解释了如何自定义滑块本身，但我找不到任何关于如何自定义缩放本身的解释。
如果我使用 、 或 添加数据，如何更改 datalist 添加的刻度的颜色？input="range"datalistoption
<input
type="range"
min=0
max=100
step={1}
list="tickmarks"
/>
<datalist id="tickmarks">
{Array.from({ length: max - min + 1 }, (_, i) => i + min).map((label) => (
<option key={label} value={label}/>
))}
</dataList>
答：
2赞
Par Tha
10/1/2023
#1
试试这个：
使用这将有助于更改输入类型范围的颜色accent-color
input[type='range'] {
accent-color: #f2354e;
}<input type="range">
0赞
A. Meshu
10/2/2023
#2
只是为了详细说明@ParTha答案 - 您可以使用来侦听范围的值，然后在值是某物时为其着色（使用）。jsclass
片段：
document.querySelectorAll("input[type='range']")[0].addEventListener('change', function() {
if (this.value < 50) { this.classList.add('lessThen50');}
else { this.classList.remove('lessThen50')};
});input[type='range'] {
accent-color: #f2354e;
}
.lessThen50 {
accent-color: #2d1694!important;
}<input type="range">
0赞
Chachacubing74
10/2/2023
#3
似乎在标签内，它除了 javascript 之外什么都没有。试试吧，也许吧？
评论