input[type=checkbox] 使用hover设置label无效

场景：自定义一个checkbox的时候，发现input[type=checkbox] 使用伪类hover的时候无论怎么设置:hover均无法使用

解释：
在CSS中，:hover伪类用于选择鼠标指针悬停在上面的元素。对于input[type=checkbox]元素，浏览器默认样式通常是不允许直接修改其外观的，因此直接使用:hover可能不会产生预期效果。

解决方法：
要使input[type=checkbox]在hover时改变样式，可以通过隐藏的checkbox和label元素配合实现。

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

重点： input必须加id，且label的for属性必须等于该id才能设置

/* 隐藏原生的checkbox */
input[type=checkbox] {
  display: none;
}

/* 定义label样式 */
label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
}

/* 当鼠标悬停在label上时改变背景色 */
label:hover {
  background-color: #f0f0f0;
}

/* 当checkbox被选中时，label显示为选中状态 */
input[type=checkbox]:checked + label {
  background-color: blue;
  border-color: blue;
}