:invalid
Pasuje do pól formularza, których wartość łamie reguły walidacji HTML, np. do pustego pola wymaganego albo błędnego adresu e-mail.
Przykład
#.error {
display: none;
color: #fda4af;
}
.field input:user-invalid {
border-color: #f43f5e;
}
.field input:user-invalid + .error {
display: block;
}<style>
.field { display: grid; gap: 6px; }
.field input { padding: 9px 12px; border: 2px solid #3f3f46; border-radius: 10px; background: #18181b; color: inherit; font: inherit; }
.field small { font-size: 13px; }
</style>
<div class="field">
<label for="email">Adres e-mail</label>
<input id="email" type="email" required placeholder="ala@example.com">
<small class="error">Podaj poprawny adres e-mail.</small>
</div>Wpisz tekst bez znaku @ i kliknij obok pola. Komunikat pojawia się dopiero po tej interakcji, a nie od razu po wczytaniu strony.
Definicja i zastosowanie
#Pseudoklasa :invalid łączy CSS z wbudowaną walidacją formularzy. Pole pasuje do niej, gdy jego wartość łamie którąś z reguł zapisanych w HTML: required przy pustym polu, type="email" przy tekście, który nie jest adresem, a także pattern, min czy max. Przeciwieństwem jest :valid.
Stan zmienia się na bieżąco, przy każdym wpisanym znaku. Do :invalid pasują też <form> i <fieldset>, jeśli zawierają choć jedno błędne pole, co pozwala na przykład przygasić przycisk wysyłania.
Największa pułapka: puste pole z required jest błędne od razu po wczytaniu strony. Czerwone ramki, zanim użytkownik cokolwiek wpisał, wyglądają jak reprymenda. Rozwiązaniem jest :user-invalid, która włącza się dopiero po interakcji: po zmianie wartości i opuszczeniu pola albo po próbie wysłania formularza. Działa we wszystkich głównych przeglądarkach od 2023 roku. Starszy sposób to :not(:placeholder-shown):invalid.
Składnia
#selektor:invalid { właściwość: wartość; }Typowe zastosowania
#- Wszystkie błędne pola od razu. Puste pole wymagane świeci na czerwono, choć nikt go jeszcze nie dotknął.
- Przeciwieństwo: pola z poprawną wartością. Popraw drugie pole na pełny adres, żeby zobaczyć zmianę.
- Czerwona ramka pojawia się dopiero po interakcji. Zmień wartość któregoś pola na błędną i kliknij obok.
input:not(:placeholder-shown):invalid
Starszy sposób: błąd widać tylko w polach, które nie są puste. Puste pole wymagane zostaje neutralne.- Formularz też pasuje do
:invalid, gdy ma w środku choć jedno błędne pole.
Typowe zastosowania w praktyce
#input:invalid
input:invalid { border-color: #f43f5e; }input:valid
input:valid { border-color: #10b981; }input:user-invalid
input:user-invalid { border-color: #f43f5e; }input:not(:placeholder-shown):invalid
input:not(:placeholder-shown):invalid { border-color: #f43f5e; }form:invalid
:invalid, gdy ma w środku choć jedno błędne pole.form:invalid {
outline: 2px dashed #f43f5e;
outline-offset: 4px;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie pokazuj błędów, zanim użytkownik zacznie działać. Błędne pola wyróżniaj przez
:user-invalid, a:invalidzostaw np. do przygaszania przycisku wysyłania. - Sam kolor nie wystarczy, bo nie każdy go rozróżnia. Dodaj obok pola komunikat tekstowy albo ikonę.
- Walidacja w HTML i CSS to wygoda dla użytkownika, a nie zabezpieczenie. Dane i tak trzeba sprawdzić po stronie serwera.
Powiązane hasła
#- :placeholder-shownPasuje do pola input lub textarea, które w tej chwili wyświetla tekst zastępczy, czyli jest puste i ma atrybut placeholder.
- :has()Wybiera element na podstawie tego, co zawiera lub co stoi za nim. Pozwala stylować rodzica według jego dzieci.
- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- :disabledPasuje do wyłączonych elementów formularza, czyli takich, których nie da się kliknąć, zaznaczyć ani edytować.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
- :focus-withinPasuje do elementu, który sam ma fokus albo zawiera element z fokusem. Pozwala wyróżnić cały formularz lub kartę.
Widzisz błąd albo brakuje przykładu? Napisz do nas.