默认情况下，浏览器对复选框（checkbox）的渲染是有限制的，你不能直接通过CSS来改变其背景颜色。但是，你可以使用一些技巧来创建一个自定义的样式。

这是一个使用伪元素创建自定义复选框并更改背景颜色的基本示例：

<!-- HTML -->  
<label class="custom-checkbox">  
  <input type="checkbox"/>  
  <span></span>  
</label>  

/* CSS */  
.custom-checkbox input[type="checkbox"] {  
    display: none;  
}  
.custom-checkbox span {  
    position: relative;  
    width: 20px;  
    height: 20px;  
    background: #ccc; /* Default/unchecked background color */  
    display: block;  
}  
.custom-checkbox input[type="checkbox"]:checked + span {  
    background: #f00; /* Checked background color */  
}  

在此示例中，我们隐藏了原始的 checkbox，并添加了一个新的 span 元素来作为自定义的 checkbox。然后，我们可以自由地设置它的背景颜色。当原始的 checkbox 被选中时，我们使用 :checked 选择器来更改自定义 checkbox 的背景颜色。