:disabled
Pasuje do wyłączonych elementów formularza, czyli takich, których nie da się kliknąć, zaznaczyć ani edytować.
Przykład
#.btn {
background: #7c3aed;
transition: opacity 0.2s;
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}<form class="stage" style="display: grid; gap: 10px; justify-items: start;">
<label style="display: flex; align-items: center; gap: 8px;">
<input type="checkbox" onchange="this.form.elements.send.disabled = !this.checked">
Akceptuję regulamin
</label>
<button class="btn" name="send" type="button" disabled style="padding: 8px 16px; border: 0; border-radius: 8px; color: #fff; font: inherit;">Zapisz się na kurs</button>
</form>Zaznacz zgodę. Skrypt zdejmuje z przycisku atrybut disabled, a CSS od razu przestaje go wyszarzać.
Definicja i zastosowanie
#Pseudoklasa :disabled wybiera kontrolki z atrybutem disabled: przyciski, pola input, listy select, pola textarea, a także option, optgroup i fieldset. Wyłączony element nie reaguje na kliknięcia, nie dostaje fokusu i nie jest wysyłany razem z formularzem.
Wyłączenie przechodzi też przez <fieldset disabled>: wszystkie kontrolki w środku pasują wtedy do :disabled, poza tymi w pierwszej legendzie. Przeciwieństwem :disabled jest :enabled, która pasuje do kontrolek aktywnych.
Przeglądarki domyślnie wyszarzają wyłączone kontrolki, ale przy własnym wyglądzie trzeba o to zadbać samemu. Typowy zestaw to obniżona nieprzezroczystość i kursor not-allowed. Pamiętaj, że :disabled nie działa dla linków ani dla elementów oznaczonych tylko aria-disabled="true"; do nich użyj selektora atrybutu.
Składnia
#selektor:disabled { właściwość: wartość; }Typowe zastosowania
#- Wyłączone kontrolki są przygaszone, a kursor nad nimi pokazuje zakaz. Najedź, żeby sprawdzić.
- Efekt najechania tylko dla aktywnych przycisków, dzięki przeciwnej pseudoklasie
:enabled. Wyłączony nie reaguje. - Przerywana ramka i przygaszony tekst jasno mówią, że wyłączonego pola nie da się edytować.
Typowe zastosowania w praktyce
#:disabled
:disabled { opacity: 0.45; cursor: not-allowed; }input:disabled
input:disabled { border-style: dashed; color: #71717a; }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
#- Wyłączony przycisk nie mówi, dlaczego jest wyłączony. Dodaj obok krótką podpowiedź albo zostaw przycisk aktywny i pokaż komunikat po kliknięciu.
- Nie przesadzaj z przezroczystością: kontrolka ma wyglądać na nieaktywną, ale jej tekst nadal musi dać się przeczytać.
- Całą sekcję formularza wyłączysz jednym atrybutem na
<fieldset disabled>. Wszystkie pola w środku od razu pasują do:disabled.
Powiązane hasła
#- :checkedPasuje do zaznaczonego pola wyboru, wybranego przycisku radio i wybranej opcji na liście select.
- :invalidPasuje do pól formularza, których wartość łamie reguły walidacji HTML, np. do pustego pola wymaganego albo błędnego adresu e-mail.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
- cursorUstawia wygląd kursora myszy nad elementem.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
- pointer-eventsWyłącza reagowanie elementu na kliknięcia i najechanie kursorem.
Widzisz błąd albo brakuje przykładu? Napisz do nas.