Teknik CSS Hack Checkbox & Radio
Tabel Konten
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>
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;}
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;
}
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! */
}
2 Komentar
Anonim
mantap mas. \o/ tapi boleh hasilkan effect demo diatas menggunakan select,option.. cuma yang membezakannya adalah outer close click :D
Taufik Nurrohman
Sayangnya tidak bisa. Kalaupun bisa, paling memakai
:focus
Demo: http://jsfiddle.net/tovic/AKZne/5/