Bagaimana untuk menggunakan 2 warna berbeza pada kotak semak dalam CSS?

Question

Saya menggunakan kotak pilihan pada halaman saya. keputusan baik. Walau bagaimanapun, saya mahukan satu kotak pilihan biru muda dan satu lagi kotak pilihan kuning muda. Kedua-dua kotak pilihan kini berwarna biru muda. Bagaimanakah saya boleh menukar yang satu lagi menjadi warna kuning muda?

Ini yang saya ada.

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

*Ini berfungsi sama dalam Chrome, Edge dan Firefox.

Tempah sahaja apa yang anda mahu浅黄色提供一个类.
Untuk pendekatan silang pelayar, saya menggunakan 和 untuk penggayaan.

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: '14';
  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>