Bagaimana Menggayakan Kotak Semak dengan Warna Berbeza Menggunakan CSS?

Penggayaan CSS Dipertingkat untuk Kotak Pilihan

Banyak penyelesaian wujud dalam talian untuk menggayakan kotak pilihan menggunakan CSS. Walau bagaimanapun, jika anda inginkan fleksibiliti yang lebih besar dan keupayaan untuk menggunakan warna yang berbeza pada kotak pilihan individu, pertimbangkan pendekatan berikut:

Keperluan:
Sesuaikan kotak pilihan dengan pelbagai warna tanpa mencipta banyak imej.

Penyelesaian:
Gunakan imej PNG lutsinar dengan bahagian luar putih dan kotak pilihan separa lutsinar. Gunakan warna latar belakang yang ditentukan CSS pada elemen HTML, menghasilkan tindanan warna pada kotak pilihan.

Kod:
JavaScript:

// Check for checkbox and apply CSS classes
if (inputs[a].type == "checkbox" || inputs[a].type == "radio" && inputs[a].className.search(/^styled/) != -1) {
  span[a] = document.createElement("span");
  span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
}

CSS:

.checkbox, .radio {
  width: 19px;
  height: 25px;
  padding: 0px;
  background: url(checkbox2.png) no-repeat;
  display: block;
  clear: left;
  float: left;
}

CSS tambahan
Tentukan kelas warna yang berbeza dan kaitkan dengan warna latar belakang.

HTML:

<p><input type="checkbox" name="1">

Kaedah ini memanfaatkan ketelusan PNG untuk mencapai kesan yang diingini, dengan mengandaikan sokongan PNG. Jika perlu, kaedah alternatif boleh digunakan, seperti menggunakan lapisan CSS yang ditindih dengan topeng GIF.

Contoh (jQuery):
https://jsfiddle.net/jtbowden/xP2Ns /

Atas ialah kandungan terperinci Bagaimana Menggayakan Kotak Semak dengan Warna Berbeza Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!