input type checkbox background color css

在CSS中设置复选框（checkbox）的背景颜色需要使用伪元素和CSS选择器来完成。具体步骤如下：

input[type=checkbox] {
  opacity: 0;
  position: absolute;
这将隐藏原始复选框，但不会影响其功能。
使用CSS伪元素（:before或:after）来创建一个新元素，例如一个带有背景颜色的方形。
input[type=checkbox]:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #ff0000; /* 设置背景颜色 */
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-right: 5px;
这里创建了一个带有红色背景的16x16像素的方形，使用1像素的灰色边框和3像素的边框半径。margin-right属性用于添加一些间距，使复选框与标签之间有一些空白。
最后，使用相邻兄弟选择器（+）将新元素与复选框关联起来。
input[type=checkbox]:checked + label:before {
  content: "\2713"; /* 选中后添加勾号 */
此代码将在选中复选框时显示勾号。
完整的代码如下所示：
input[type=checkbox] {
  opacity: 0;
  position: absolute;
input[type=checkbox]:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #ff0000; /* 设置背景颜色 */
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-right: 5px;
input[type=checkbox]:checked + label:before {
  content: "\2713"; /* 选中后添加勾号 */
注意，这里使用的是“label”元素，这是与复选框相关联的标签元素。如果您不使用标签，则需要使用其他选择器来将新元素与复选框相关联。