:checked :disabled i pseudo-klasy stanu formularza
Nauczy się Pan/Pani stylizować elementy formularzy na podstawie ich stanów interaktywnych, takich jak checked, disabled i required.
:checked :disabled i pseudo-klasy stanu formularza to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Przegląd pseudoklas stanów formularza
CSS udostępnia pseudoklasy odzwierciedlające stany elementów formularzy HTML. Umożliwiają one stylowanie kontrolek formularzy wyłącznie za pomocą CSS, bez JavaScriptu.
:checked
:checked działa na polach wyboru i przyciskach radiowych, gdy są zaznaczone, a także na elementach <option> wewnątrz list wyboru, gdy zostaną wybrane.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked dla niestandardowych pól wyboru
Sztuczka z :checked: należy ukryć natywne pole input, a następnie stylować niestandardowe pole za pomocą selektora sąsiedniego rodzeństwa aktywowanego przez :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled i :enabled
:disabled wybiera elementy formularza z atrybutem disabled. :enabled wybiera elementy, z którymi można wchodzić w interakcję.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required i :optional
:required wybiera pola wejściowe z atrybutem required. :optional wybiera pola bez tego atrybutu.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid i :invalid
:valid i :invalid odzwierciedlają natywny dla przeglądarki stan walidacji formularza na podstawie ograniczeń type, pattern, min/max i required.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid i :user-invalid
Walidacja przeglądarki uruchamia się natychmiast po załadowaniu strony, jeszcze przed interakcją użytkownika. :user-valid i :user-invalid działają dopiero po interakcji użytkownika z polem — zapewnia to znacznie lepsze wrażenia użytkownika.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown działa, gdy pole wejściowe wyświetla tekst zastępczy — oznacza to, że jest obecnie puste. Można za jego pomocą wykrywać puste pola bez używania JavaScriptu.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only i :read-write
:read-only wybiera pola wejściowe z atrybutem readonly. :read-write wybiera pola, które można edytować.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate działa na polach wyboru w stanie pośrednim (ani zaznaczonych, ani niezaznaczonych — ustawianym za pomocą JavaScriptu), a także na przyciskach radiowych, gdy w grupie nie wybrano żadnej opcji.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range i :out-of-range
W przypadku pól wejściowych type="number" lub type="range" z wartościami min/max pseudoklasy :in-range i :out-of-range odzwierciedlają poprawność bieżącej wartości względem tych ograniczeń.
<input type="number" min="1" max="10" value="15" />
Szybkie sprawdzenie
Która pseudoklasa stosuje style walidacji formularza dopiero po interakcji użytkownika z polem wejściowym?
Podsumowanie
Pseudoklasy stanów formularzy CSS odzwierciedlają natywną walidację formularzy i stan interakcji bez używania JavaScriptu: :checked, :disabled, :required, :valid, :invalid i inne. Dla lepszych wrażeń użytkownika należy preferować :user-invalid zamiast :invalid. Do wykrywania pustych pól należy używać :placeholder-shown.
Często zadawane pytania
Czy lekcja „:checked :disabled i pseudo-klasy stanu formularza” jest bezpłatna?
Tak — pełny tekst „:checked :disabled i pseudo-klasy stanu formularza” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „:checked :disabled i pseudo-klasy stanu formularza”?
Nauczy się Pan/Pani stylizować elementy formularzy na podstawie ich stanów interaktywnych, takich jak checked, disabled i required. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „:checked :disabled i pseudo-klasy stanu formularza”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- :hover :focus :active i :visited
- :nth-child i :nth-of-type
- :not() :is() i :where()
- :checked :disabled i pseudo-klasy stanu formularza