: valid adalah pseudo-class CSS yang digunakan untuk memilih dan membentuk elemen <input> yang nilainya divalidasi sesuai dengan tipenya yang ditentukan dalam atribut type.
Misalnya, input email (<input type = “email”>) yang nilainya cocok dengan pola alamat email yang valid.
Ketika tipe input angka (<input type = “number”>) berada dalam kisaran nilai yang diizinkan ditentukan menggunakan atribut min dan max, maka: kecocokan kelas semu yang valid, dan juga:: kecocokan kelas semu dalam kisaran . Gaya apa pun yang diterapkan menggunakan: dalam-rentang akan menimpa gaya yang diterapkan menggunakan: hanya valid jika: dalam-kisaran gaya datang setelah: gaya yang valid dalam lembar gaya.
Sama seperti penyeleksi pseudo-kelas lainnya, pemilih: valid dapat dirantai dengan penyeleksi lainnya seperti: hover dan: fokus, antara lain. Misalnya, aturan berikut ini akan memberikan gaya fokus untuk elemen yang dalam keadaan valid, menambahkan cahaya hijau lembut di sekitarnya:
input:valid:focus {
outline: 0;
border: none;
box-shadow: 0 0 3px 6px rgba(0, 200, 0, 0.3);
}
Kalian dapat melihat demo langsung ini di bagian demo langsung di bawah ini.
input[type="number"]:valid {
background-color: lightgreen;
}
input:valid {
box-shadow: 0 0 3px 5px rgba(0, 200, 0, .2);
}