Skip to main content

B.6.11. Disabled

Pada chapter ini, kita akan membahas pseudo-class :disabled. Pseudo-class ini digunakan untuk menargetkan elemen form yang dalam keadaan non-aktif, yang berarti pengguna tidak dapat berinteraksi dengan elemen tersebut.

Elemen yang dapat di-disable termasuk input, select, textarea, dan button.

Pernah ga teman-teman bayangin kalo semisalkan di dalam kondisi tertetu, sebuah tombol akan memiliki kondisi mati atau disabled? contohnya ketika sebuah stok barang habis maka tombol untuk menambah ke keranjang tidak bisa di klik. Nah teman-teman bisa menggunakan disabled ini.

Oke langsung saja kita praktik, let's code!

<button class="add-to-chart">Add to chart</button>

Hasil dari kode di atas kurang lebih seperti ini:

Output

Nah contohnya, ketika <button> tersebut di matikan maka akan berwarna abu-abu dan cursornya not-allowed. Teman-teman bisa tambahkan kode di bawah ini.

.add-to-chart:disabled {
  background-color: rgba(128, 128, 128, 0.559);
  cursor: not-allowed;
}

Untuk melihat perubahannya, teman-teman bisa menambahkan attribut disabled pada elemen <button> tersebut.

<button class="add-to-chart" disabled>Add to chart</button>

Maka hasilnya akan terlihat seperti:

Nah jadi itu cara untuk memanfaatkan pseudo-class :disabled untuk menangani kondisi ketika teman-teman butuh untuk mematikan sebuah tombol dan sebagainya.

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.11-disabled