Bagaimanakah Saya Boleh Menindih Warna CSS pada Kotak Semak Kelabu untuk Penyelesaian Penggayaan Teguh?

Menggayakan Kotak Pilihan dengan CSS: Penyelesaian Teguh

Walaupun pelbagai teknik penggayaan CSS wujud untuk kotak pilihan, siasatan ini mencari pendekatan yang lebih mantap yang membolehkan tindanan warna yang ditentukan CSS pada kotak pilihan kelabu. Ini amat berguna apabila menangani bilangan kotak pilihan yang tidak dapat diramalkan yang setiap satunya memerlukan warna yang unik, menghapuskan keperluan untuk mencipta banyak imej.

Penyelesaian melibatkan penggunaan imej PNG lutsinar, di mana bahagian luarnya berwarna putih dan kotak semak sebahagiannya telus. Imej ini kemudiannya ditindih pada kotak pilihan menggunakan warna latar belakang CSS, menghasilkan kotak pilihan berwarna.

Untuk melaksanakan pendekatan ini, pengubahsuaian CSS, JS dan HTML berikut diperlukan:

JS:

// Change all instances of '== "styled"' to '.search(...)' to handle additional classes
if ((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {
    span[a] = document.createElement("span");
    // Add '+ ...' to handle additional classes on the checkbox
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
}

CSS:

.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; // Removes padding to eliminate color bleeding around image
    background: url(checkbox2.png) no-repeat;
    display: block;
    clear: left;
    float: left;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

HTML:

<p><input type="checkbox" name="1" class="styled green" /> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>

Pendekatan ini menggunakan prinsip menindih imej lutsinar dengan warna latar belakang CSS untuk mencapai kotak pilihan berwarna. Ia menyediakan penyelesaian yang teguh untuk menggayakan kotak pilihan secara dinamik dengan warna berbeza tanpa memerlukan banyak imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menindih Warna CSS pada Kotak Semak Kelabu untuk Penyelesaian Penggayaan Teguh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!