Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana Menggayakan Kotak Semak CSS dengan Tindanan Warna?

Bagaimana Menggayakan Kotak Semak CSS dengan Tindanan Warna?

Patricia Arquette
Patricia Arquetteasal
2024-11-06 16:40:03493semak imbas

How to Style CSS Checkboxes with Color Overlays?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn