: pengguna-tidak valid - Trik CSS

Ini :user-invalidadalah kelas semu CSS yang ada dalam proposal di draf kerja Level 4 Pemilih CSS yang memilih elemen formulir berdasarkan apakah nilai-seperti yang dimasukkan oleh pengguna-valid ketika diperiksa dengan apa yang ditentukan sebagai nilai yang diterima di markup HTML setelah pengguna akhir berinteraksi dengan formulir di luar input itu. Faktanya, :user-invalidtelah disebut "Kelas Semu Interaksi Pengguna" karena unik dalam mengidentifikasi tindakan pengguna dalam memilih elemen.

Ambil markup HTML berikut untuk formulir dasar dengan bidang numerik:

Kuantitas:

Rentang numerik yang disetel oleh markup HTML untuk input berada di antara 1dan 10tetapi nilai default telah disetel ke 11. Itu berarti nilainya tidak valid segera setelah formulir dimuat.

Namun, :user-invalidpseudo-class tidak akan berpengaruh sampai pengguna benar-benar berinteraksi dengan formulir setelah memasukkannya ke dalam bidang. Interaksi itu adalah perbedaan antara :user-invaliddan :invalid. Prinsip yang sama berlaku untuk nilai formulir yang dimasukkan yang ditetapkan oleh :in-range, :out-of-rangedan :required.

Setelah nilai yang dimasukkan pengguna ditentukan sebagai entri yang tidak valid, kita dapat memilih elemen:

input:user-invalid ( color: red; )

Gambar berikut mengilustrasikan berbagai status antara :valid, dan :user-invalidberdasarkan contoh HTML di atas.

Perbedaan antara nilai valid (kiri) dan nilai tidak valid yang dimasukkan oleh pengguna setelah berinteraksi dengan formulir.

Hal yang membingungkan di sini adalah seberapa dekat :invaliddan terkait :user-invalid. Jika digunakan bersamaan, mungkin sulit untuk membedakan keduanya:

input:invalid ( color: red; ) input:user-invalid ( color: red; )

Perbedaan antara `:invalid`(tengah) dan nilai tidak valid yang dimasukkan oleh pengguna (kanan) bisa jadi sulit dibedakan

Menggunakan salah satu dari yang lain atau memiliki gaya yang berbeda di antara keduanya mungkin terbukti menjadi pengalaman pengguna yang lebih baik dalam kasus penggunaan kehidupan nyata.