Barusan Saya mencoba melebarkan elemen checkbox selebar-lebarnya. Saya tidak berharap bahwa tampilannya akan berubah, tapi Saya harap Saya dapat menemukan sesuatu yang lain.
Pada umumnya, dikala kita ingin membuat imbas toggle hanya dengan CSS kita akan memakai elemen checkbox dan radio untuk membuat imbas toggle sederhana. Tapi yang jadi persoalan adalah, elemen checkbox dan radio tidak dapat dimodifikasi tampilannya dengan CSS (kecuali untuk peramban webkit). Hal yang biasa kita lakukan yaitu menambahkan elemen label dengan atribut for bernilai ID dari elemen checkbox atau radio terkait, sehingga dikala elemen label tersebut diklik, maka elemen checkbox atau radio terkait dapat 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>Dengan cara itu kita dapat menerapkan CSS3 :checked terhadap elemen checkbox menurut 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 dapat mempengaruhi checkbox, jadi kita dapat memakai label untuk menjalankan checkbox sekaligus sebagai pengganti checkbox yang dapat kita atur tampilannya sesuka hati. Kemudian kita dapat menyembunyikan elemen checkbox alasannya yaitu elemen label dapat menjadi mediator untuk mengubah perilaku checkbox:
/* Buat tampilan elemen label semoga tampak menyerupai tombol */ label { cursor:pointer; display:inline-block; background-color:cyan; padding:2px 5px; margin:0 0 2px; } label:hover { text-decoration:underline; } /* Jalankan kiprah 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;}Yang Satu Ini Agak Berbeda!
Hack checkbox yang satu ini agak berbeda dengan versi di atas, mengingat ternyata kita dapat 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 dapat memakai 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 otoriter terhadap induknya */ } /* Buat tampilan elemen label semoga tampak menyerupai 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 dapat 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; }Lebih Detail
Saya mencoba membuat drop down hidangan sederhana memakai metode yang ke dua, meski tanpa id dan for, tapi teknik ini dapat 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! */ }