如何更改复选框的颜色？ [复制]

【问题标题】：How do I change the color of the checkbox? [duplicate]如何更改复选框的颜色？ [复制]
【发布时间】：2021-09-06 07:45:55
【问题描述】：

好的，所以我为密码输入制作了一个显示隐藏切换复选框。但是，我无法弄清楚如何使复选框的“选中时”背景变为不同的颜色。

在我们现有的代码库中，有一个使用自定义样式的自定义复选框，但是我不能将此复选框用于此功能，因为它不使用 ng-model。

&lt;input style="color: #009688;" type="checkbox"&gt;

【问题讨论】：

标签： html css input checkbox styles

【解决方案1】：

在标准方式中，您无法在不使用插件或自定义修改的情况下为checkbox 设置背景颜色。但是有一个技巧可以让你给背景颜色。使用规则filter 和参数hue-rotate()。

另外，可以通过转换RGB 代码得到deg 的值。

input[type="checkbox"]:nth-child(1):checked {
    filter: hue-rotate(240deg);
}

input[type="checkbox"]:nth-child(2):checked {
    filter: hue-rotate(285deg);
}


input[type="checkbox"]:nth-child(3):checked {
    filter: hue-rotate(300deg);
}

input[type="checkbox"]:nth-child(4):checked {
    filter: hue-rotate(320deg);
}

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox"> <!--ORIGINAL-->

【讨论】：