Warianty disabled i placeholder
Stylować wyłączone elementy formularzy za pomocą disabled:* oraz dostosowywać wygląd tekstu zastępczego przy użyciu wariantów placeholder:*.
Warianty disabled i placeholder to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 3 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 Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Stylizowanie stanów formularza
Elementy formularzy mogą znajdować się w wielu stanach, nie tylko domyślnym i aktywnym. Gdy pole input jest wyłączone, powinno wyglądać inaczej i sygnalizować, że interakcja nie jest możliwa. Gdy jest puste, tekst zastępczy podpowiada użytkownikowi, co należy wpisać. Tailwind udostępnia prefiksy wariantów disabled: i placeholder:, które pozwalają deklaratywnie stylizować te konkretne stany w kodzie HTML bez tworzenia własnych reguł CSS.
<!-- Disabled and placeholder states side by side -->
<div class="space-y-3 max-w-sm">
<input type="text" placeholder="Type something here" class="w-full border rounded px-3 py-2 placeholder:text-gray-400" />
<input type="text" placeholder="Read only" disabled class="w-full border rounded px-3 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100" />
</div>Podstawy wariantu disabled:
Wariant disabled: działa, gdy element formularza ma atrybut HTML disabled. Najczęściej stosowany wzorzec stylizacji to disabled:opacity-50 disabled:cursor-not-allowed — zmniejszenie krycia sygnalizuje niedostępność, a zmiana kursora na symbol zakazu zapobiega nieporozumieniom. Można również dodać disabled:bg-gray-100, aby nadać wyłączonym polom charakterystyczny kolor tła podkreślający ich tylko do odczytu.
<!-- Disabled form inputs with clear visual treatment -->
<div class="space-y-3 max-w-sm">
<input
type="text"
value="Active input"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
/>
<input
type="text"
value="Disabled input"
disabled
class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400"
/>
</div>disabled: dla przycisków
Wyłączone przyciski muszą jasno komunikować, że dana czynność jest niedostępna. Wzorzec disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none tworzy dostępny wyłączony przycisk, który jest wyszarzony, wyświetla kursor zakazu i nie reaguje na kliknięcia nawet przy użyciu JavaScriptu. Dodanie disabled:pointer-events-none zapobiega wyświetlaniu efektów hover na wyłączonych przyciskach.
<!-- Enabled vs disabled button states -->
<div class="flex gap-4 flex-wrap">
<button
class="bg-blue-600 hover:bg-blue-700 active:scale-95 text-white px-5 py-2.5 rounded-lg font-medium transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none"
>
Active Button
</button>
<button
disabled
class="bg-blue-600 hover:bg-blue-700 active:scale-95 text-white px-5 py-2.5 rounded-lg font-medium transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none"
>
Disabled Button
</button>
</div>disabled: dla selectów i innych kontrolek
Wariant disabled: działa na każdym elemencie HTML, który może mieć atrybut disabled: inputs, selects, textareas, buttons, optgroups i fieldsets. W przypadku elementu fieldset z atrybutem disabled wszystkie zawarte w nim kontrolki formularza dziedziczą stan wyłączenia, ale wariant Tailwind działa tylko na elemencie bezpośrednim — dlatego narzędzia disabled:* należy dodać do fieldsetu, a nie do jego elementów potomnych.
<!-- Disabled select and textarea -->
<div class="space-y-3 max-w-sm">
<select
disabled
class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option>Select country...</option>
<option>United States</option>
</select>
<textarea
disabled
rows="3"
placeholder="Notes (locked)"
class="w-full border border-gray-300 rounded-lg px-4 py-2 resize-none disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
></textarea>
</div>Podstawy wariantu placeholder:
Wariant placeholder: stylizuje tekst zastępczy wewnątrz pól input i textarea. Bez dostosowania tekst zastępczy dziedziczy kolor tekstu pola input, ale ma zmniejszone krycie. Typowe modyfikacje to placeholder:text-gray-400 dla jaśniejszej szarości, placeholder:text-sm dla mniejszego tekstu zastępczego oraz placeholder:italic, aby wizualnie odróżnić podpowiedź od właściwej treści pola.
<!-- Customized placeholder text styles -->
<div class="space-y-3 max-w-sm">
<!-- Default placeholder -->
<input type="text" placeholder="Default placeholder" class="w-full border rounded px-3 py-2" />
<!-- Styled placeholder -->
<input
type="text"
placeholder="Styled placeholder"
class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 placeholder:text-sm placeholder:italic"
/>
<!-- Colored placeholder for category input -->
<input
type="text"
placeholder="Search products..."
class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>Łączenie placeholder: z fokusem
Dopracowany wzorzec UX polega na stopniowym zanikaniu lub zmianie tekstu zastępczego po uzyskaniu fokusu przez pole, co wizualnie potwierdza możliwość rozpoczęcia pisania. Połączenie placeholder:text-gray-400 focus:placeholder:text-gray-300 delikatnie wygasza tekst zastępczy po uzyskaniu fokusu — to subtelny efekt kierujący uwagę na kursor. W niektórych projektach używa się focus:placeholder:opacity-0, aby całkowicie ukryć tekst zastępczy po uzyskaniu fokusu.
<!-- Placeholder fades on focus -->
<div class="space-y-3 max-w-sm">
<input
type="text"
placeholder="Click here — placeholder fades"
class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:placeholder:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
/>
</div>placeholder: dla wyszukiwania i filtrów
Pola wyszukiwania i filtrowania często używają tekstu zastępczego jako głównej etykiety — szczególnie w kompaktowych interfejsach, w których osobna etykieta zajmowałaby zbyt dużo miejsca. Należy stylizować je za pomocą placeholder:text-gray-500, aby zapewnić dobry kontrast, i rozważyć dodanie ikony obok tekstu zastępczego. Wzorzec pl-10 placeholder:text-sm pozostawia miejsce na ikonę wyszukiwania umieszczoną bezwzględnie wewnątrz pola.
<!-- Search input with icon and styled placeholder -->
<div class="relative max-w-sm">
<!-- Search icon -->
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
</svg>
</div>
<input
type="search"
placeholder="Search by name, email..."
class="w-full border border-gray-300 rounded-xl pl-10 pr-4 py-2.5 placeholder:text-gray-400 placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>Stylizowanie elementów innych niż input jako wyłączonych
Pseudoklasa CSS :disabled technicznie dotyczy tylko elementów formularzy. Aby inne elementy, takie jak wyłączony element listy lub wyszarzona karta, wyglądały na wyłączone, należy użyć aria-disabled jako punktu zaczepienia i stylizować je za pomocą wariantu Tailwind aria-disabled: lub warunkowej klasy CSS. Alternatywnie Tailwind obsługuje składnię wariantu arbitralnego [&[aria-disabled=true]]:, umożliwiającą precyzyjne wskazanie elementów.
<!-- Making non-form elements look disabled -->
<div class="space-y-3">
<!-- Subscription card: disabled with aria-disabled -->
<div
aria-disabled="true"
class="border border-gray-200 rounded-xl p-4 opacity-50 cursor-not-allowed select-none"
>
<h3 class="font-bold text-gray-500">Enterprise Plan</h3>
<p class="text-sm text-gray-400">Contact sales to enable</p>
</div>
<!-- Active card for comparison -->
<div class="border border-blue-200 rounded-xl p-4 cursor-pointer hover:border-blue-400">
<h3 class="font-bold">Pro Plan</h3>
<p class="text-sm text-gray-500">$29/month</p>
</div>
</div>Stany ładowania i oczekiwania
Oprócz stanu wyłączenia elementy formularzy czasami potrzebują stanu ładowania podczas oczekiwania na zakończenie operacji asynchronicznej. Tailwind nie ma wbudowanego wariantu loading:, ale można osiągnąć ten efekt, stosując klasy warunkowo. Przycisk wyświetlający wskaźnik ładowania oraz pointer-events-none opacity-75 komunikuje, że czynność jest w toku. Połączenie tego z animate-spin na obracającym się wskaźniku SVG sprawia, że stan jest jednoznaczny.
<!-- Loading state on a submit button -->
<div class="flex gap-4">
<!-- Loading state (simulate with always-applied classes) -->
<button
class="flex items-center gap-2 bg-blue-600 text-white px-5 py-2.5 rounded-lg font-medium opacity-75 pointer-events-none"
>
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
</svg>
Saving...
</button>
<!-- Normal state -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium">
Save Changes
</button>
</div>Najlepsze praktyki dotyczące placeholder:
Oto kilka ważnych wskazówek: nigdy nie należy używać placeholdera jako jedynej etykiety pola input — znika on po rozpoczęciu pisania, co narusza wymaganie WCAG 1.3.5 (identyfikacja celu pola). Placeholder powinien pełnić funkcję dodatkowej podpowiedzi obok widocznej etykiety. Ponadto tekst zastępczy zazwyczaj ma niższy kontrast niż zwykły tekst, dlatego należy sprawdzić, czy kolor placeholder:text-* spełnia wymagany przez WCAG AA współczynnik kontrastu 4,5:1, gdy pole jest puste, a placeholder jest jedyną wskazówką dla użytkownika.
<!-- Best practice: label + placeholder as hint -->
<div class="max-w-sm space-y-4">
<div>
<!-- Visible label: always shown -->
<label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
<!-- Placeholder: supplementary hint, not the only label -->
<input
type="text"
placeholder="e.g. john_doe"
class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<p class="text-xs text-gray-400 mt-1">Letters, numbers, and underscores only</p>
</div>
</div>Kompletny formularz ze wszystkimi stanami
Oto kompletny formularz logowania, w którym połączono stylizowanie stanów wyłączenia, tekstu zastępczego, fokusu i błędu. Jest to przykład formularza jakości produkcyjnej, który obsługuje każdy stan, z jakim użytkownik może się zetknąć. Każde pole ma etykietę, podpowiedź w postaci tekstu zastępczego i obramowanie fokusu, a wyłączone pole jest wyszarzone. Przycisk przesyłania jest aktywny i gotowy na stylizowanie stanów hover i active.
<form class="max-w-sm space-y-4 p-6">
<div>
<label class="block text-sm font-medium mb-1">Email</label>
<input type="email" placeholder="you@example.com" class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div>
<label class="block text-sm font-medium mb-1">Account ID</label>
<input type="text" value="ACC-12345" disabled class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed" />
<p class="text-xs text-gray-400 mt-1">Account ID cannot be changed</p>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white py-2.5 rounded-lg font-semibold transition-all">
Update Profile
</button>
</form>Szybkie sprawdzenie
Proszę sprawdzić swoją znajomość zagadnień Tailwind CSS Mastery omówionych w tej lekcji.
Podsumowanie lekcji
W tej lekcji poznali Państwo: disabled: stylizuje elementy formularza, gdy obecny jest atrybut HTML disabled, placeholder: wskazuje kolor, rozmiar i styl tekstu zastępczego wewnątrz pól input oraz połączenie disabled:opacity-50, disabled:cursor-not-allowed i disabled:pointer-events-none tworzy kompletny wzorzec wyłączonego przycisku. Następnie poznamy zaawansowane warianty group i peer do obsługi interakcji między elementami nadrzędnymi, potomnymi i sąsiednimi.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Warianty disabled i placeholder” jest bezpłatna?
Tak — pełny tekst „Warianty disabled i placeholder” 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 Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Warianty disabled i placeholder”?
Stylować wyłączone elementy formularzy za pomocą disabled:* oraz dostosowywać wygląd tekstu zastępczego przy użyciu wariantów placeholder:*. Ćwiczysz Tailwind 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ąć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind 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 3 z 4.
Ile czasu zajmuje lekcja „Warianty disabled i placeholder”?
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 Tailwind CSS Academy?
Tak. Każda lekcja Tailwind 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
- Warianty hover i active
- Warianty focus i focus-visible
- Warianty disabled i placeholder
- Warianty group i peer