Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Teknik CSS Hack Checkbox & Radio

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 2 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!