Pseudoklasa CSS :invalid wybiera każdy element formularza, który pośrednio lub bezpośrednio zawiera nieprawidłową wartość lub treść. Oznacza to, że pseudoklasa ta uwzględnia także takie elementy, jak form
i fieldset
, w których mogą znajdować się elementy formularza zawierające nieprawidłową wartość.
Jeśli na przykład formularz zawiera element input
typu number
, którego maksymalna wartość wynosi 10
, a użytkownik wpisze 20
, to pseudoklasa :invalid
wybierze zarówno ten element input
, jak i zawierający go element form
oraz ewentualnie element fieldset
.
W przypadku przycisków radiowych pseudoklasa :invalid
wybiera wszystkie elementy z grupy (zbioru elementów typu input
z atrybutem name
o takiej samej wartości), jeśli jeden z nich jest wymagany (ma atrybut required
), ale żaden z nich nie jest zaznaczony.
Przykład użycia :invalid
Poniżej znajduje się prosty formularz HTML zawierający jeden element fieldset
i jeden element input
typu number
oraz dotyczący go arkusz stylów.
<style>
form:invalid {
padding: 15px;
background-color: lightgreen;
}
fieldset:invalid {
padding: 15px;
background-color: lightyellow;
}
input:invalid {
background-color: lightpink;
}
</style>
...
<form>
<fieldset>
<input type="number" name="liczba" min="10" max="20">
</fieldset></form>
Dopuszczalny zakres wartości w tym elemencie input
wynosi od 10
do 20
. Jeśli użytkownik wpisze na przykład liczbę 5
, to element ten będzie zawierał nieprawidłową wartość, w efekcie czego pseudoklasa :invalid
będzie odnosiła się do elementów input
, fieldset
i form
tego formularza, co widać na poniższym zrzucie ekranu.

Składnia :invalid
Składnia pseudoklasy :invalid
:
:invalid {...}