Pseudoklasa CSS :valid wybiera elementy formularza, które zostały prawidłowo wypełnione (np. input) lub które zawierają tylko prawidłowo wypełnione pola (np. fieldset).
Przykład użycia :valid
W poniższym przykładzie pseudoklasa :valid nada zielony obrys wszystkim poniższym elementom, jeśli zostaną prawidłowo wypełnione lub nie zostaną wypełnione w ogóle.
:valid {outline: 3px solid green}
input, fieldset {margin: 10px;}
...
<input type="email>
<fieldset>
<input type="number" min="10" max="20">
<fieldset>
Gdy jednak w którymkolwiek z tych pól użytkownik wpisze niepoprawną wartość, to obramowanie zniknie, ponieważ przestanie on być wybierany przez pseudoklasę :valid.
Spójrz na poniższy zrzut ekranu. Zwróć uwagę, że nieprawidłowa wartość w polu liczbowym spowodowała także zniknięcie zielonego obramowania elementu fieldset.
Składnia :valid
Składnia pseudoklasy :valid:
:valid {...}