: kullanıcı geçersiz - CSS Hileleri

:user-invalidSeçiciler Seviye 4 çalışma tasarısı CSS'deki önerisi altında olan bir CSS sözde sınıfı olması ile kabul edilen bir değer olarak tanımlanır şeye karşı işaretlendiğinde değer olarak girilir geçerli kullanıcı olmasına bağlı olarak seçer bir form öğesi son kullanıcı bu girişin ötesinde formla etkileşim kurduktan sonra HTML biçimlendirmesi. Aslında, :user-invalidbir öğe seçerken bir kullanıcı eylemini tanımlamada benzersiz olduğu için "Kullanıcı Etkileşimi Sözde sınıfı" olarak adlandırılmıştır.

Sayısal alan içeren temel bir form için aşağıdaki HTML işaretlemesini alın:

Miktar:

Girdi için HTML işaretlemesi tarafından ayarlanan sayısal aralık 1ve arasında , 10ancak varsayılan değer olarak ayarlandı 11. Bu, form yüklenir yüklenmez değerin geçersiz olduğu anlamına gelir.

Ancak :user-invalidsözde sınıf, kullanıcı alana girmenin ötesinde formla fiilen etkileşime girene kadar etkili olmayacaktır. Bu etkileşim arasındaki farktır :user-invalidve :invalid. Aynı ilke :in-range, :out-of-rangeve tarafından ayarlanan girilen form değerleri için de geçerlidir :required.

Kullanıcının girdiği değerin geçersiz bir giriş olduğu belirlendiğinde, öğeyi seçebiliriz:

input:user-invalid ( color: red; )

Aşağıdaki resim :valid, :user-invalidyukarıdaki HTML örneğine dayalı olarak ve arasındaki farklı durumları göstermektedir .

Formla etkileşim kurduktan sonra bir kullanıcı tarafından girilen geçerli bir değer (sol) ile geçersiz bir değer arasındaki fark.

Buradaki kafa karıştırıcı şey, ne kadar yakından ilişkili :invalidve :user-invalidolduklarıdır. Birlikte kullanılırsa, ikisini birbirinden ayırmak zor olabilir:

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

Arasındaki fark `:invalid`ayırt etmek (merkezi) ve bir kullanıcı (sağda) tarafından girilen geçersiz değere zor olabilir

Birini diğerinin üzerinde kullanmak veya ikisi arasında farklı bir stile sahip olmak, gerçek hayattaki kullanım durumunda daha iyi bir kullanıcı deneyimi olabilir.