css实现更改checkbox的样式；更改checkbox选中后的背景色；更改checkbox选中后的icon

要使用CSS更改选中状态下复选框（checkbox）的样式，你需要针对:checked伪类编写CSS规则。以下是实现这一目标的示例代码：

/* 隐藏原生的checkbox */
input[type=checkbox] {
  display: none;
}
 
/* 自定义样式 */
input[type=checkbox] + label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 2px solid #ccc;
  vertical-align: middle;
  cursor: pointer;
}
 
/* 当checkbox被选中时 */
input[type=checkbox]:checked + label::before {
  content: "✔"; /* 更改选中后的图标 */
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-color: #007bff; /* 更改选中后的背景色 */
  color: white; /* 更改选中后的图标颜色 */
  border: none;
  font-size: 24px;
  text-align: center;
}

HTML部分：

<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">选项</label>

在这个例子中，CSS隐藏了原生的checkbox，并为每个checkbox创建了一个自定义样式的伪元素。当checkbox被选中时，伪元素的样式会更改，包括背景色和内部图标。