如何更改复选框的颜色？

Question

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

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

<input style="color: #009688;" type="checkbox">

Answer 1

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

的规则 filter

另外，可以通过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-->

如何更改复选框的颜色？

How do I change the color of the checkbox?

html

css

checkbox

styles

input