PSEUDO-CLASS FORM

Pseudo-class dalam CSS adalah kata kunci yang ditambahkan pada selector yang membantu kamu memilih elemen berdasarkan informasi spesifik yang tidak bisa diterukan melalui selector biasa. Dalam artikel ini, kita akan membahas tentang penggunaan pseudo-class dalam form CSS.

Apa itu Pseudo-Class dalam Form?

Pseudo-class di form membantu kamu memilih dan memberikan gaya pada elemen form berdasarkan status atau perilakunya. Contohnya, kamu bisa memberikan gaya berbeda untuk input form saat cursor berada diatasnya(dengan menggunakan pseudo-class :hover), atau input field yang sudah diisi(dengan pseudo-class :valid).

Berikut adalah beberapa contoh pseudo-class yang biasa digunakan dalam form:

• :focus: Selector ini digunakan untuk memilih elemen form ketika elemen tersebut sedang dalam fokus.
• :disabled: Selector ini digunakan untuk memilih form yang dinonaktifkan.
• :valid: Memilih semua field form yang memiliki nilai valid.
• :invalid: Memilih semua field form yang memiliki nilai invalid.
• :required: Selector ini memilih setiap elemen form dengan atribut ‘required’.
• :optional: Memilih semua elemen form tanpa atribut ‘required’.

Menggunakan Pseudo-class :focus

Pseudo-class :focus digunakan untuk memilih elemen form yang sedang dalam fokus. Berikut adalah contohnya:

input:focus {
  background-color: lightblue;
}

Pada kode di atas, input form akan berubah menjadi warna lightblue saat dibuat fokus (misalnya, saat pengguna mengklik di dalam field).

Menggunakan Pseudo-class :valid dan :invalid

Pseudo-class :valid dan :invalid digunakan untuk memvalidasi nilai input form. Contohnya sebagai berikut:

input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid green;
}

Pada kode di atas, border input form akan berubah menjadi merah jika nilai di dalamnya tidak valid, dan berubah menjadi hijau jika valid. Elemen ini sangat berguna untuk memberikan feedback instan ke pengguna terkait informasi yang mereka masukkan ke dalam form.