如何用CSS为两个复选框（checkbox）设置不同颜色？

要让两个复选框分别显示浅蓝色和浅黄色，只需给它们添加独立类名，再通过类选择器单独设置背景色即可，具体实现如下：

修改后的HTML代码 #

<p>
  <label><input type="checkbox" class="filter light-blue-checkbox" value="Test1">Test1</label> 
  <label><input type="checkbox" class="filter light-yellow-checkbox" value="Test2">Test2</label>
</p>

修改后的CSS代码 #

input[type=checkbox] {
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}
input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  border: 1px solid #99AFC1;
  border-radius: 3px;
  background-color: lightblue; /* 第一个复选框的默认颜色 */
  padding: 1px;
}
input[type=checkbox]:checked::before {
  background-color: lightblue; /* 第一个复选框的选中颜色 */
}

/* 第二个复选框的颜色设置 */
input.light-yellow-checkbox:before {
  background-color: lightyellow;
}
input.light-yellow-checkbox:checked::before {
  background-color: lightyellow;
}

input[type=checkbox]:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}

说明 #

• 保留原有基础复选框样式，给第二个复选框添加light-yellow-checkbox类，通过类选择器覆盖它的before伪元素背景色（包含未选中和选中状态）
• 第一个复选框无额外类，自动沿用基础样式的浅蓝色，无需额外调整

内容的提问来源于stack exchange，提问作者newuser