Ada beberapa pseudo-class CSS yang berkaitan dengan validasi form. Berikut penjelasan lengkapnya:
1. :valid
Menargetkan elemen input yang valid berdasarkan aturan HTML.
📌 Digunakan untuk menandai input yang benar.
input:valid {
border: 1px solid green;
}
2. :invalid
Menargetkan elemen input yang tidak valid.
📌 Langsung aktif sejak awal jika input kosong & required.
input:invalid {
border: 1px solid red;
}
:user-valid (🔄 Mirip :valid, tetapi lebih user-friendly)input:user-valid {border: 1px solid green;}
:valid: Tidak langsung hijau saat halaman dimuat. Baru berubah setelah pengguna mengisi input dengan benar.4. :user-invalid (🔄 Mirip :invalid, tetapi lebih user-friendly)
Menargetkan input yang tidak valid setelah pengguna mengetik dan keluar dari input.
input:user-invalid {
border: 1px solid red;
}
:invalid: Tidak langsung merah dari awal, baru muncul setelah pengguna berinteraksi dengan input.5. :optional
Menargetkan input yang tidak memiliki atribut required, alias opsional.
input:optional {
border: 1px solid blue;
}
6. :required
Menargetkan input yang memiliki atribut required.
input:required {border: 1px solid orange;}
7. :focus
Menargetkan input yang sedang aktif diketik oleh pengguna.
input:focus {
outline: 2px solid blue;
}
8. :placeholder-shown
Menargetkan input yang placeholder-nya masih terlihat (belum diisi).
input:placeholder-shown {
background-color: lightgray;
}
input:valid {border: 2px solid green;}input:invalid {border: 2px solid red;}input:user-valid {background-color: lightgreen;}input:user-invalid {background-color: pink;}input:focus {outline: 2px solid blue;}input:placeholder-shown {background-color: lightgray;}