html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式

可以使用伪类选择器来改变复选框和单选框的样式。以下是一个示例代码，可以改变复选框和单选框的选中和未选中状态的背景颜色：

/* 未选中状态 */
input[type="checkbox"]:not(:checked),
input[type="radio"]:not(:checked) {
  background-color: #fff; /* 未选中状态背景色 */
}

/* 选中状态 */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #007bff; /* 选中状态背景色 */
}

/* 外观样式 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none; /* 去掉默认样式 */
  -moz-appearance: none;
  appearance: none;
  width: 20px; /* 设置宽高 */
  height: 20px;
  border: 1px solid #ccc; /* 设置边框 */
  border-radius: 3px; /* 设置圆角 */
  outline: none; /* 去掉聚焦时的虚线 */
  transition: all 0.3s ease-in-out; /* 添加过渡效果 */
}

/* 鼠标悬停状态 */
input[type="checkbox"]:hover:not(:checked),
input[type="radio"]:hover:not(:checked) {
  border-color: #007bff; /* 鼠标悬停时边框颜色 */
}

/* 选中状态下的图标 */
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  content: "\2713"; /* 使用 Unicode 符号作为图标 */
  display: block;
  text-align: center;
  color: #fff;
  line-height: 20px;
}

你可以根据自己的需求修改这个样式代码，以实现不同的效果。