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

icomxhvb 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(147)

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

2条答案

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

#checkbox {
  accent-color: limegreen;
}

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

此选项适用于复选框、滑块和单选按钮。目前还没有办法为所选组件的选项设置背景样式。
不过浏览器支持仍然有限，在Firefox和Edge的下一个版本中也会支持。

使用filter: hue-rotate作为输入非常有用
hue-rotate以度为单位，这意味着您可以使用0- 360 deg
(This所有浏览器均支持）
下面是一个例子：

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

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