在悬停和选中时更改复选框图标颜色答案

【问题标题】：Change checkbox icon color on hover and checked在悬停和选中时更改复选框图标颜色
【发布时间】：2023-01-19 20:04:39
【问题描述】：

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

我有一个复选框的代码：

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

我预期的行为是：当用户悬停并选中复选框时，图标会改变颜色。但是，这似乎不起作用。

【问题讨论】：

您能否也分享 HTML 代码，以便人们可以帮助您
请包含一个包含 HTML 和 CSS 的完整示例（您当前的选择器看起来像 LESS 等 CSS 预处理语言，因为它以 & 开头）
欢迎来到 SO，请您编辑您的问题并使用 sn-p 按钮包含您的 html 并创建一个 minimal reproducible example 否则我们将无法帮助您

标签： html css

【解决方案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>

【讨论】：