如何更改复选框、滑块、单选按钮和选择组件的强调色?

Question

我想更改复选框、滑块、单选按钮和选择组件的强调色。有什么简单的方法可以做到吗?

Answer 1

如果您使用的是Chrome版本93+，则可以使用新的accent-color属性。

#checkbox {
accent-color: limegreen;
}

<input type="checkbox" id="checkbox"/>

这适用于复选框、滑块和单选按钮。当前无法为所选组件的选项设置背景样式。

浏览器支持仍然有限。下一个版本的Firefox和Edge也将支持该功能。

Answer 2

使用filter: hue-rotate作为输入是有用的

hue-rotate以度计算，这意味着您可以使用0-360度

(所有浏览器都支持)

下面是一个例子:

input {
filter: hue-rotate(320deg)
}

<input type="checkbox" checked><br>
<input type="radio" checked><br>
<input type="range">