更改CSS中输入类型范围栏的颜色
See*_*lus 8 html css webkit input
我在代码中使用输入类型范围栏，并且想更改颜色。我不想改变它的任何其他内容，我只想将颜色从蓝色更改为其他颜色。
我知道我可以通过 css 访问它，如下所示：
input[type=range] {
-webkit-appearance: none;
}
但这改变了输入范围，我只想改变颜色。
小智 5
只需在输入字段中使用accent-color css属性，并为该字段提供任何颜色，这里我创建了3个带有红色、绿色和蓝色的输入范围字段，但您可以用它创建任何颜色范围输入。希望这个答案有帮助
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.sliderRed{
accent-color:red;
}
.sliderGreen{
accent-color: green;
}
.sliderBlue{
accent-color:blue;
}
</style>
</head>
<body>
<div className="m-auto my-4 flex justify-between ">
<input type="range" class="sliderRed" id="myRange"/>
<input type="range" class="sliderGreen" id="myRange"/>
<input type="range" class="sliderBlue" id="myRange"/>
</div>
</body>
</html>据我了解，你不能只改变一个部分的颜色而让其他部分保持原样。此外，在不同的浏览器中，滑块的各个部分是不同的（它们的渲染方式不同，并且内部结构也不同）。
看看这个工具：https://toughengineer.github.io/demo/slider-styler
它允许相对轻松地设置<input>范围滑块的样式并为您生成跨浏览器 CSS。
这是一篇关于<input>range 元素如何工作以及如何在不同浏览器中设置其各个部分的样式的精彩文章：
https ://css-tricks.com/sliding-nightmare-understand-range-input/
| 归档时间： |
|
| 查看次数： |
11138 次 |
| 最近记录： |