Bagaimana Menggayakan Kotak Semak CSS dengan Tindanan Warna?

Menggayakan Kotak Semak CSS dengan Tindanan Warna

Satu cabaran apabila menyesuaikan kotak pilihan menggunakan CSS ialah menambah tindanan warna untuk meningkatkan daya tarikan visual. Ini boleh menjadi sangat mencabar apabila berbilang kotak pilihan dengan warna berbeza diperlukan. Walau bagaimanapun, terdapat penyelesaian berkesan yang tersedia untuk menangani isu ini.

Pendekatan popular melibatkan mencipta imej PNG telus dengan kotak pilihan separa lutsinar. Dengan mengubah suai warna latar belakang CSS, anda boleh menindih warna yang dikehendaki pada kotak pilihan. Kaedah ini memerlukan sokongan PNG dan menganggap sokongan ketelusan dalam penyemak imbas.

Pelaksanaan melalui CSS, JavaScript dan HTML:

JavaScript:

// Handle additional classes on the checkbox
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {

    span[a] = document.createElement("span");

    // Add additional classes for colors
    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;
 }

.green {
    background-color: green;
 }

.red {
    background-color: red;
 }

HTML:

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

Contoh jQuery:

Untuk demonstrasi langsung, rujuk contoh jQuery yang disediakan di bawah:

http://jsfiddle.net/jtbowden/xP2Ns/

Penyelesaian ini menggunakan gabungan CSS , JavaScript dan HTML untuk mencapai penggayaan kotak semak interaktif dengan tindanan warna.

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