🥡 🏅 ✋🏼 Kotak centang styling dan tombol radio menggunakan CSS3 🤱🏻 🙋🏿 🤷

Saat membuat gaya CSS untuk formulir HTML, pengembang sering menghadapi ketidakmampuan untuk secara langsung mengubah tampilan kotak centang dan tombol radio. Mari kita lihat bagaimana mengatasi batasan ini menggunakan alat CSS3 dan tanpa menggunakan kode JavaScript apa pun.

Jadi, sebagai permulaan, tambahkan beberapa kotak centang biasa dan alihkan ke formulir:

/*   */

<div>
<input type="checkbox" id="cb1"> <label for="cb1"> 1</label>
</div>

<div>
<input type="checkbox" id="cb2"> <label for="cb2"> 2</label>
</div>

<div>
<input type="checkbox" id="cb3"> <label for="cb3"> 3</label>
</div>

/*   */

<div>
<input type="radio" name="rb" id="rb1" checked> <label for="rb1"> 1</label>
</div>

<div>
<input type="radio" name="rb" id="rb2"> <label for="rb2"> 2</label>
</div>

<div>
<input type="radio" name="rb" id="rb3"> <label for="rb3"> 3</label>
</div>

Pindahkan tampilan elemen standar di luar cakupan dan tambahkan indentasi ke label yang berdekatan:

input[type="checkbox"]:checked, 
input[type="checkbox"]:not(:checked), 
input[type="radio"]:checked, 
input[type="radio"]:not(:checked) 
{
    position: absolute;
    left: -9999px;
}

input[type="checkbox"]:checked + label, 
input[type="checkbox"]:not(:checked) + label, 
input[type="radio"]:checked + label, 
input[type="radio"]:not(:checked) + label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    line-height: 20px;
    cursor: pointer;
}

Sebelum label, tambahkan wadah bergaya untuk elemen khusus kami. Untuk bendera, ini adalah kotak dengan tepi agak bulat untuk kecantikan, dan untuk sakelar, hanya lingkaran kecil:

input[type="checkbox"]:checked + label:before, 
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
}

input[type="checkbox"]:checked + label:before, 
input[type="checkbox"]:not(:checked) + label:before {
    border-radius: 2px;
}

input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    border-radius: 100%;
}

Sekarang tambahkan indikator pemilihan. Untuk bendera, ini akan menjadi daw, untuk sakelar, lingkaran kecil yang diisi dengan warna akan lebih kecil dari wadah itu sendiri. Untuk efek yang lebih besar, kami juga menyiapkan animasi kecil:

input[type="checkbox"]:checked + label:after, 
input[type="checkbox"]:not(:checked) + label:after, 
input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    content: "";
    position: absolute;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

input[type="checkbox"]:checked + label:after, 
input[type="checkbox"]:not(:checked) + label:after {
    left: 3px;
    top: 4px;
    width: 10px;
    height: 5px;
    border-radius: 1px;
    border-left: 4px solid #e145a3;
    border-bottom: 4px solid #e145a3;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #e145a3;
}

Untuk menggambarkan gagak, kita memutar persegi panjang kecil, dua sisi yang dicat warna, 45 derajat berlawanan arah jarum jam.

Perhatikan bahwa: sebelum dan: setelah penyeleksi memungkinkan Anda untuk menambahkan konten segera sebelum dan sesudah konten label itu sendiri. Karena untuk label yang kita tentukan posisi relatif (posisi: relatif), kita dapat mengatur penentuan posisi absolut kontekstual untuk konten mereka.

Tetap menyembunyikan indikator pemilihan saat item tidak dipilih, dan, karenanya, menampilkannya ketika item berada dalam keadaan yang dipilih:

input[type="checkbox"]:not(:checked) + label:after, 
input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
}

input[type="checkbox"]:checked + label:after, 
input[type="radio"]:checked + label:after {
    opacity: 1;
}

Kami menambahkan bahwa solusi yang dijelaskan di sini berfungsi di semua versi modern browser Chrome, Firefox, Safari, Opera, dan juga, dimulai dengan versi 9, dan di Internet Explorer.

Definisi CSS lengkap dapat diunduh di sini .

Kotak centang styling dan tombol radio menggunakan CSS3

More articles: