Skip to main content

B.6.10. Checked

Pada chapter ini, kita akan membahas pseudo-class :checked. Pseudo-class ini digunakan untuk menargetkan elemen form yang bisa dicentang atau dipilih, seperti <radio> atau <checkbox>.

Ketika elemen-elemen ini dalam kondisi terpilih atau dicentang, maka pseudo-class :checked dapat diterapkan untuk mengubah style mereka.

Pseudo-class :checked sangat berguna ketika kita ingin memberikan style khusus saat pengguna berinteraksi dengan form, misalnya ketika mereka memilih opsi tertentu.

Contoh sederhananya, kita bisa memberikan perubahan gaya ketika checkbox atau radio button dicentang. Let's code!

<form class="newsletter-form">
  <!-- Subscribe -->
  <div class="input-group">
    <input
      type="checkbox"
      name="subscribe"
      id="subscribe"
      class="input-field"
    />
    <label for="subscribe" class="label">Subscribe Newsletter</label>
  </div>
  <!-- Gender -->
  <div class="input-group">
    <label class="label">Gender:</label>
    <div class="radio-input-group">
      <input type="radio" name="gender" id="male" class="input-field" />
      <label for="male">Male</label>
    </div>
    <div class="radio-input-group">
      <input type="radio" name="gender" id="female" class="input-field" />
      <label for="female">Female</label>
    </div>
  </div>
</form>

Maka hasilnya akan terlihat seperti:

Ketika di ceklis maka akan ada background berwarna biru, kondisi inilah yang disebut dengan checked. Kita bisa menerapkan style ketika suatu checkbox atau radio dalam kondisi checked.

Contohnya, teman-teman ingin merubah warna background nya ketika di checked dan label nya menjadi berwarna blueviolet juga, maka teman-teman bisa menerapkan kode seperti: 

.newsletter-form {
  /* ..... */
}

.input-group {
  /* ..... */
}

.label:not([for="subscribe"]) {
  /* ..... */
}

.input-field:checked {
  accent-color: blueviolet;
}

.input-field:checked + label {
  color: blueviolet;
}

Adjacent sibling (+): selektor ini digunakan untuk menargetkan elemen yang langsung mengikuti elemen lainnya. Ini hanya akan memilih elemen berikutnya yang adalah sibling dari elemen yang dipilih. Dalam kasus ini adalah elemen label yang merupakan saudara dari elemen input.

Maka hasilnya akan terlihat seperti

Nah teman-teman bisa melakukan eksperimen dengan :checked ini. Silahkan gunakan sesuai dengan kebutuhannya ya!

Selamat mengoprek~

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.6-pseude-class/B.6.10-checked