CSS向复选框添加自定义背景色

可以通过伪元素和伪类来实现。具体步骤如下：

1. 首先，需要将复选框的默认样式隐藏掉，可以使用display: none;来实现。
2. 接下来，使用伪元素::before或::after来创建一个自定义的复选框样式。可以使用content属性来添加一个空内容，然后设置宽度、高度、边框等样式属性来定义复选框的外观。
3. 使用伪类:checked来控制复选框选中状态下的样式。可以设置背景色、边框颜色等属性来实现自定义背景色的效果。

以下是一个示例代码：

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

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
}

input[type="checkbox"]:checked + label::before {
  background-color: #f00;
}

在上面的示例中，通过设置input[type="checkbox"]的display: none;来隐藏默认的复选框样式。然后使用input[type="checkbox"] + label来选择复选框的相邻兄弟元素，即label元素，通过设置padding-left: 25px;来给label留出空间，使得自定义的复选框样式能够显示在label的左侧。

接着使用input[type="checkbox"] + label::before来选择label元素的伪元素::before，通过设置content: "";来添加一个空内容，然后设置宽度、高度、边框等样式属性来定义复选框的外观。

最后使用input[type="checkbox"]:checked + label::before来选择选中状态下的复选框，通过设置background-color: #f00;来实现自定义背景色的效果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm