Teknik CSS Hack Checkbox & Radio

Barusan Saya mencoba melebarkan elemen checkbox selebar-lebarnya. Saya tidak berharap bahwa tampilannya akan berubah, tapi Saya harap Saya bisa menemukan sesuatu yang lain.

Pada umumnya, saat kita ingin menciptakan efek toggle hanya dengan CSS kita akan menggunakan elemen checkbox dan radio untuk menciptakan efek toggle sederhana. Tapi yang jadi masalah adalah, elemen checkbox dan radio tidak bisa dimodifikasi tampilannya dengan CSS (kecuali untuk peramban webkit). Hal yang biasa kita lakukan adalah menambahkan elemen label dengan atribut for bernilai ID dari elemen checkbox atau radio terkait, sehingga saat elemen label tersebut diklik, maka elemen checkbox atau radio terkait bisa ikut terpengaruh:

<input type="checkbox" id="check-1"><label for="check-1">Tombol 1</label>
<input type="checkbox" id="check-2"><label for="check-2">Tombol 2</label>
<input type="checkbox" id="check-3"><label for="check-3">Tombol 3</label>

Lihat Demo

Dengan cara itu kita bisa menerapkan CSS3 :checked terhadap elemen checkbox berdasarkan apa yang kita lakukan terhadap elemen label:

input[type="checkbox"]:checked + label {
  background-color:pink;
}

input[type="checkbox"]:checked ~ button {
  font-weight:bold;
  font-size:20px;
}

Elemen label masih bisa mempengaruhi checkbox, jadi kita bisa menggunakan label untuk menjalankan checkbox sekaligus sebagai pengganti checkbox yang bisa kita atur tampilannya sesuka hati. Kemudian kita bisa menyembunyikan elemen checkbox karena elemen label bisa menjadi perantara untuk mengubah sikap checkbox:

/* Buat tampilan elemen label agar tampak seperti tombol */
label {
  cursor:pointer;
  display:inline-block;
  background-color:cyan;
  padding:2px 5px;
  margin:0 0 2px;
}

label:hover {
  text-decoration:underline;
}

/* Jalankan tugas elemen checkbox! */
input[type="checkbox"]:checked + label {
  background-color:pink;
}

input[type="checkbox"]:checked ~ button {
  font-weight:bold;
  font-size:20px;
}

/* Sembunyikan checkbox */
input[type="checkbox"] {display:none;}

Lihat Demo

---

Yang Satu Ini Agak Berbeda!

Hack checkbox yang satu ini agak berbeda dengan versi di atas, mengingat ternyata kita bisa melebarkan clickable-area pada elemen checkbox, maka kita tidak perlu lagi direpotkan oleh atribut id dan for yang harus kita buat berbeda-beda pada setiap elemen checkbox, radio dan label. Kita bisa menggunakan elemen checkbox itu sendiri sebagai tombol palsu:

Sampel Kerangka

<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>

CSS

div {
  position:relative; /* Kita butuh ini untuk memposisikan anak elemen menjadi absolut terhadap induknya */
}

/* Buat tampilan elemen label agar tampak seperti tombol */
div label {
  display:block;
  padding:0 15px;
  line-height:30px;
  background-color:black;
  color:white;
}

/* Perluas clickable-area checkbox selebar-lebarnya terhadap elemen induk */
div input {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
  /* Seperti tautan yang bisa diklik */
  cursor:pointer;
 /* Sembunyikan checkbox, namun pastikan tetap aksesibel */
  opacity:0;
  filter:alpha(opacity=0);
}

/* Saat checkbox dicek, ubah tampilan latar elemen label di sebelahnya menjadi merah */
div input:checked + label {
  background-color:red;
}

Lihat Demo - Dengan Checkbox Lihat Demo - Dengan Radio

Lebih Detail

Saya mencoba membuat drop down menu sederhana menggunakan metode yang ke dua, meski tanpa id dan for, tapi teknik ini bisa bekerja dengan baik:

HTML

<div class="dropdown">
    <input type="checkbox">
    <label data-default="Normal State" data-active="Active State"></label>
    <ul>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Dolor Sit</a></li>
        <li><a href="#">Amet</a></li>
    </ul>
</div>

CSS

.dropdown {
  position:relative;
  width:170px;
  height:30px;
  background-color:black;
  margin:0 0 10px;
  display:inline-block;
}

.dropdown * {
  list-style:none;
  margin:0 0;
  padding:0 0;
}

.dropdown ul {
  position:absolute;
  top:100%;
  right:0;
  left:0;
  z-index:99;
  background-color:black;
  display:none;
}

.dropdown a {
  display:block;
  padding:5px 15px;
  color:white;
  text-decoration:none;
}

.dropdown a:hover {
  background-color:blue;
}

.dropdown input {
  display:block;
  /* Expand the checkbox */
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  /* Hide the ckeckbox elements without losing our pointer access */
  opacity:0;
  filter:alpha(opacity=0);
  cursor:pointer; /* Behave like a link */
}

.dropdown label {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  line-height:30px;
  padding:0 15px;
  color:white;
}

.dropdown label:before {
  content:attr(data-default); /* Show the text of the default state */
}

.dropdown input:checked + label {
  background-color:red; /* Active state background-color */
}

.dropdown input:checked + label:before {
  content:attr(data-active); /* Show the text of the active state */
}

.dropdown input:checked ~ ul {
  display:block; /* Show the drop down list when checkbox is checked! */
}

Demo