改变悬停时复选框图标的颜色

Question

我需要同时更改悬停和选中复选框中的图标颜色。

复选框的代码如下:

&:checked:hover + label::before { border: none; color: blue; }

我期望的行为是:当用户悬停并且复选框被选中时，图标会改变颜色。然而，这似乎不起作用。

Answer 1

你需要把你的代码，但鉴于你正在使用相邻的兄弟组合子，它看起来好像你的图标是在你的复选框之后，但缺少:hover伪类，例如:

#myInput:checked+label:hover::before {
color: blue;
}
label::before {
content: "✖";
margin-right: 0.5rem;
}

<input type=checkbox id='myInput'>
<label for='myInput'>Label</label>

Answer 2

你可以使用新的CSS accent-color属性来改变复选框的背景颜色:

input[type='checkbox'] {
accent-color: red;

}