: tidak sah pengguna - Trik CSS

Ini :user-invalidadalah kelas pseudo CSS yang berada di bawah cadangan dalam draf kerja Tingkat 4 Pemilih CSS yang memilih elemen bentuk berdasarkan apakah nilai-seperti yang dimasukkan oleh pengguna-itu valid ketika diperiksa terhadap apa yang ditentukan sebagai nilai yang diterima dalam penandaan HTML setelah pengguna akhir telah berinteraksi dengan borang di luar input tersebut. Sebenarnya, :user-invalidtelah disebut "The Pseudo-class Interaction Pengguna" kerana unik dalam mengenal pasti tindakan pengguna dalam memilih elemen.

Ikuti markup HTML berikut untuk bentuk asas dengan medan angka:

Kuantiti:

Julat angka yang ditetapkan oleh markup HTML untuk input adalah antara 1dan 10tetapi nilai lalai telah ditetapkan ke 11. Ini bermaksud nilainya tidak sah sebaik sahaja borang dimuat.

Walau bagaimanapun, kelas :user-invalidpseudo tidak akan berlaku sehingga selepas pengguna benar-benar berinteraksi dengan borang di luar memasukkannya ke lapangan. Interaksi itu adalah perbezaan antara :user-invaliddan :invalid. Prinsip yang sama berlaku untuk nilai bentuk yang dimasukkan yang ditetapkan oleh :in-range, :out-of-rangedan :required.

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

input:user-invalid ( color: red; )

Gambar berikut menggambarkan keadaan yang berbeza antara :valid, dan :user-invalidberdasarkan contoh HTML di atas.

Perbezaan antara nilai yang sah (kiri) dan nilai tidak sah yang dimasukkan oleh pengguna setelah berinteraksi dengan borang.

Perkara yang membingungkan di sini adalah bagaimana berkait rapat :invaliddan :user-invalid. Sekiranya digunakan bersama, mungkin sukar untuk membezakan keduanya:

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

Perbezaan antara `:invalid`(tengah) dan nilai tidak sah yang dimasukkan oleh pengguna (kanan) sukar dibezakan

Menggunakan satu daripada yang lain atau mempunyai gaya yang berbeza antara keduanya mungkin terbukti menjadi pengalaman pengguna yang lebih baik dalam kes penggunaan kehidupan nyata.