The :invalidpemilih membolehkan anda untuk memilih unsur-unsur yang tidak mengandungi kandungan yang sah, seperti yang ditentukan oleh yang typeatribut. :invaliddidefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "validity pseudo-selector", yang bermaksud ia digunakan untuk menata elemen interaktif berdasarkan penilaian input pengguna.
Pemilih ini mempunyai satu kegunaan tertentu: memberi maklum balas kepada pengguna semasa mereka berinteraksi dengan borang di halaman. Contoh di bawah ini menggunakan CSS untuk menjadikan medan "E-mel" menjadi merah atau hijau, yang merespons sama ada kandungannya sesuai dengan corak alamat e-mel yang sah:
Perhatikan bagaimana yang pertama ("E-mel") berwarna hijau-walaupun tidak ada kandungan di lapangan. Ini kerana inputnya adalah pilihan, jadi membiarkannya kosong akan menghasilkan pengiriman borang yang sah. Untuk memperbaiki tingkah laku ini, yang kedua memiliki atribut "wajib", yang bermaksud bahawa medan kosong akan menghasilkan pengiriman borang yang tidak sah.
Tempat Menarik
:invaliddapat "dirantai" dengan pemilih pseudo lain: suka:focushanya mengesahkan ketika pengguna sedang menaip,:beforeatau:afteruntuk menghasilkan ikon atau teks untuk memberikan lebih banyak maklum balas pengguna, atau pemilih atribut ingininput(value="")hanya mengesahkan bidang input yang berisi kandungan.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Tidak | Tidak |
:invaliddiperkenalkan dalam CSS Selectors Module 3, yang bermaksud versi lama penyemak imbas tidak menyokongnya. Walau bagaimanapun, sokongan penyemak imbas moden semakin baik. Sekiranya anda memerlukan sokongan penyemak imbas yang lebih lama, baik polyfill, atau gunakan pemilih ini dengan cara yang tidak kritikal á la peningkatan progresif, yang disyorkan.