: invalid adalah pseudo-class CSS yang digunakan untuk memilih dan menata bentuk elemen <input> yang nilainya tidak valid sesuai dengan tipenya yang ditentukan dalam atribut type.

Misalnya, tipe input angka (<input type = “number”>) yang memiliki nilai karakter alfabet, atau input email (<input type = “email”>) yang nilainya tidak cocok dengan pola alamat email yang valid.

Di beberapa browser,: invalid juga cocok dengan form (<form>) dan fieldset (<fieldset>) yang memiliki satu atau lebih elemen input yang memiliki nilai tidak valid sesuai dengan nilai tipenya.

Trivia & Catatan

Ketika tipe input angka (<input type = “number”>) berada di luar kisaran nilai yang diizinkan yang ditentukan menggunakan atribut min dan max, maka: kecocokan kelas semu yang tidak valid, dan juga: pseudo di luar kisaran Pertandingan-kelas. Gaya apa pun yang diterapkan menggunakan: di luar kisaran akan menimpa gaya yang diterapkan menggunakan: tidak valid. Ini agak masuk akal karena: di luar kisaran lebih spesifik, karena merupakan bagian dari semua kasus yang cocok dengan: tidak valid.

The: pseudo-class yang tidak valid juga berlaku untuk semua tombol dalam kelompok tombol radio (mereka memiliki nilai atribut nama yang sama) jika salah satu tombol diperlukan (memiliki atribut yang diperlukan) tetapi tidak ada tombol di grup tersebut yang terpilih.

Sama seperti penyeleksi pseudo-class lainnya, pemilih: invalid dapat dirantai dengan penyeleksi lain seperti: hover dan: fokus, antara lain. Misalnya, aturan berikut akan memberikan gaya fokus untuk elemen yang berada dalam keadaan tidak valid, menambahkan cahaya merah lembut di sekitarnya untuk menarik perhatian pengguna terhadapnya:

Kalian dapat melihat demo langsung ini di bagian demo langsung di bawah ini.