Pseudoklasa CSS :invalid

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 {...}