Wie wende ich zwei verschiedene Farben auf das Kontrollkästchen in CSS an?

Question

Ich verwende Kontrollkästchen auf meinen Seiten. gute Ergebnisse. Ich möchte jedoch ein hellblaues Kontrollkästchen und ein weiteres hellgelbes Kontrollkästchen. Beide Kontrollkästchen sind derzeit hellblau. Wie kann ich das andere in eine hellgelbe Farbe verwandeln?

Das ist es, was ich habe.

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[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;
}

<p><label><input type="checkbox" class="filter" value="Test1">Test1</label> <label><input type="checkbox" class="filter" value="Test2">Test2</label></p>

Answer 1

*这在 Chrome、Edge 和 Firefox 中呈现相同的效果。

只需为您想要的浅黄色提供一个类即可。
对于跨浏览器方法，我使用了 和 进行样式设置。

label.checkbox input[type="checkbox"] {
  display:none;
}
label.checkbox span {
  display:inline-block;
  border: 1px solid Gray;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  background-color: lightblue;
  vertical-align: top;
  position: relative;
}
label.checkbox :checked + span {
  width: 18px;
  height: 18px;
}
label.checkbox :checked + span:after {
  content: '\2714';
  font-size: 100%;
  position: absolute;
  top: -12%;
  left: 12%;
  color: lightyellow;
}

/* Make the above your default checkbox, and the below can be used for special ones. */

label.checkbox.difcol span {
  background-color: lightyellow; /* New Box Color */
}
label.checkbox.difcol :checked + span:after {
  color: lightblue; /* Corresponding New Checkmark Color */
}

<p>
<label class="checkbox"><input type="checkbox"/><span></span></label> Test1
<label class="checkbox difcol"><input type="checkbox"/><span></span></label> Test2
</p>