Pseudoklasa CSS :user-invalid wybiera elementy input, textarea i select, które mają określone wymagania dotyczące ich treści, ale nie zostały one spełnione przez użytkownika, który tę treść dostarczył.
Jeśli na przykład formularz zawiera pole służące do wpisania adresu e-mail i użytkownik wpisze w nim tekst niespełniający warunków takiego adresu, to element ten zostanie wybrany przez pseudoklasę :user-invalid.
Przykład :user-invalid
W tym przykładzie nieprawidłowo wypełnione pola formularza zostaną oznaczone czerwonym obrysem.
:user-invalid {outline: 3px solid red}
...
<input type="email>
<textarea maxlength="10">Obszar tekstowy</textarea>Należy pamiętać, że pseudoklasa :user-invalid włącza się dopiero po interakcji użytkownika z elementem. Dlatego w powyższym przykładzie, mimo że element textarea zawiera domyślnie więcej niż dziesięć znaków, początkowo nie będzie on miał czerwonego obrysu.
Ten element zawiera niepoprawną treść, ale nie był edytowany przez użytkownika, więc nie został wybrany przez pseudoklasę :user-invalid
Kiedy natomiast użytkownik zmodyfikuje zawartość tego elementu, ale nie zmniejszy liczby zawartych w nim znaków do maksymalnie dziesięciu, pseudoklasa :user-invalid nada mu czerwony obrys.
Po usunięciu jednej litery element nadal nie spełnia warunków treści, więc został wybrany przez pseudoklasę :user-invalid.
Składnia :user-invalid
Składnia pseudoklasy :user-invalid:
:user-invalid {...}