The :validpemilih memungkinkan Anda untuk memilih elemen yang berisi konten valid, sebagaimana ditentukan oleh nya typeatribut. :validdidefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "selektor-semu validitas", yang berarti digunakan untuk mengatur gaya elemen interaktif berdasarkan evaluasi input pengguna.
Pemilih ini memiliki satu kegunaan khusus: memberikan masukan kepada pengguna saat mereka berinteraksi dengan formulir di halaman. Contoh di bawah ini menggunakan CSS untuk mengubah bidang "Email" menjadi merah atau hijau, menanggapi apakah konten cocok dengan pola alamat email yang valid atau tidak:
Lihat Pena: input valid &: tidak valid oleh Chris Coyier (@chriscoyier) di CodePen
Perhatikan bagaimana yang pertama ("Email") berwarna hijau-valid-bahkan ketika tidak ada konten di bidang. Ini karena inputnya opsional, jadi membiarkannya kosong akan menghasilkan pengiriman formulir yang valid. Untuk memperbaiki perilaku ini, yang kedua memiliki atribut "diperlukan", yang berarti bahwa bidang kosong akan mengakibatkan pengiriman formulir tidak valid.
Tempat Menarik
:validdapat “dirantai” dengan selektor-semu lainnya: seperti:focusuntuk hanya memvalidasi saat pengguna mengetik,:beforeatau:afteruntuk menghasilkan ikon atau teks untuk memberikan lebih banyak umpan balik pengguna, atau pemilih atributinput(value="")hanya ingin memvalidasi bidang masukan yang berisi konten.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validdiperkenalkan di CSS Selectors Module 3, yang berarti browser versi lama tidak mendukungnya. Namun, dukungan browser modern semakin baik. Jika Anda memerlukan dukungan browser lama, baik polyfill, atau gunakan pemilih ini dengan cara yang tidak kritis seperti peningkatan progresif, yang direkomendasikan.