PricingLoginStart free
Tailwind CSS Academy · Lekcja

Menu select i pola wyboru

Stylować natywne listy rozwijane select i pola wyboru oraz używać pluginu @tailwindcss/forms do ujednolicania wyglądu formularzy w różnych przeglądarkach.

Lekcja 2 z 413 kroki

Menu select i pola wyboru to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 2 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.

Wyzwanie związane z natywnymi kontrolkami formularzy

Natywne elementy <select>, <checkbox> i <radio> słyną z trudności w uzyskaniu spójnego wyglądu w różnych przeglądarkach. Domyślnie dziedziczą wygląd systemu operacyjnego za pomocą właściwości CSS appearance, którą Tailwind resetuje klasą użytkową appearance-none.

Po usunięciu natywnego wyglądu odzyskują Państwo pełną kontrolę nad stylami. Wtyczka @tailwindcss/forms automatyzuje ten reset dla wszystkich elementów formularzy, zapewniając czystą bazę zgodną z różnymi przeglądarkami bez konieczności ręcznego dodawania appearance-none w każdym miejscu.

<!-- Without plugin: manual appearance reset needed -->
<select class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-lg">
  <option>Option A</option>
</select>

<!-- With @tailwindcss/forms plugin: already normalized -->
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg">
  <option>Option A</option>
</select>

Stylizacja listy wyboru

Wystylizowana lista wyboru używa tych samych klas bazowych co pole tekstowe: w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white. Dodaj niestandardową strzałkę listy wyboru, pozycjonując obraz SVG w tle lub nakładając ikonę SVG pozycjonowaną absolutnie.

Stan fokusu korzysta ze znanego zestawu focus:outline-none focus:ring-2 focus:ring-blue-500. Dodaj cursor-pointer, aby kursor myszy informował, że kliknięcie otworzy menu.

<div class="relative">
  <select
    class="w-full appearance-none px-3 py-2 text-sm text-gray-900 bg-white
           border border-gray-300 rounded-lg cursor-pointer
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="de">Germany</option>
  </select>
  <!-- Custom dropdown arrow -->
  <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
    <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </div>
</div>

Instalacja wtyczki Forms

Wtyczka @tailwindcss/forms zapewnia opiniotwórczy reset dla wszystkich natywnych elementów formularzy. Zainstaluj ją za pomocą npm install -D @tailwindcss/forms i dodaj do tablicy plugins w pliku tailwind.config.js.

Po instalacji wszystkie pola wejściowe, listy wyboru, obszary tekstowe, pola wyboru i przyciski opcji otrzymają spójny styl bazowy. Następnie można nakładać na nie klasy użytkowe Tailwind bez konieczności walki z domyślnymi stylami przeglądarki. Użyj require('@tailwindcss/forms')({ strategy: 'class' }), jeśli wolisz, aby wtyczka działała tylko po dodaniu określonej klasy.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    // Or with class strategy:
    // require('@tailwindcss/forms')({ strategy: 'class' }),
  ],
}

Stylizacja pól wyboru

Za pomocą wtyczki forms pola wyboru są już znormalizowane. Następnie można dostosować ich rozmiar, kolor i zaokrąglenie za pomocą utilities. Użyj w-4 h-4 rounded text-blue-600 border-gray-300 — klasa text-blue-600 na polu wyboru ustawia kolor wypełnienia znacznika wyboru.

Połącz pole wyboru z etykietą za pomocą flex items-center gap-2, aby zachować ich wyrównanie w poziomie. Tekst etykiety używa text-sm font-medium text-gray-700.

<div class="flex items-center gap-2">
  <input
    id="terms"
    type="checkbox"
    class="w-4 h-4 rounded text-blue-600 border-gray-300
           focus:ring-blue-500 focus:ring-2 cursor-pointer"
  />
  <label for="terms" class="text-sm font-medium text-gray-700 cursor-pointer">
    I agree to the <a href="/terms" class="text-blue-600 hover:underline">Terms of Service</a>
  </label>
</div>

Lista pól wyboru do zaznaczania wielu opcji

Lista pól wyboru pozwala użytkownikom zaznaczyć wiele opcji. Ułóż wiele elementów pól wyboru jeden pod drugim, dodając space-y-3 do kontenera. Umieść je w elemencie <fieldset> z elementem <legend>, aby zapewnić dostępność.

Element legend identyfikuje całą grupę dla czytników ekranu, a poszczególne etykiety są powiązane z właściwymi polami wyboru za pomocą atrybutów for/id.

<fieldset>
  <legend class="text-sm font-semibold text-gray-900 mb-3">Notification preferences</legend>
  <div class="space-y-3">
    <div class="flex items-center gap-2">
      <input id="email-notif" type="checkbox" checked class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
      <label for="email-notif" class="text-sm text-gray-700">Email notifications</label>
    </div>
    <div class="flex items-center gap-2">
      <input id="push-notif" type="checkbox" class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
      <label for="push-notif" class="text-sm text-gray-700">Push notifications</label>
    </div>
    <div class="flex items-center gap-2">
      <input id="sms-notif" type="checkbox" class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
      <label for="sms-notif" class="text-sm text-gray-700">SMS notifications</label>
    </div>
  </div>
</fieldset>

Stylowanie przycisków radiowych

Przyciski radiowe styluje się tak samo jak pola wyboru, ale zamiast rounded używa się rounded-full, aby zachować okrągły wygląd kojarzony przez użytkowników z wyborem jednej opcji. Sposób z text-blue-600 działa tutaj również i ustawia kolor wypełnienia.

Wszystkie przyciski radiowe w tej samej grupie muszą mieć ten sam atrybut name, aby przeglądarka wymuszała możliwość zaznaczenia tylko jednej opcji.

<fieldset>
  <legend class="text-sm font-semibold text-gray-900 mb-3">Plan</legend>
  <div class="space-y-2">
    <div class="flex items-center gap-2">
      <input id="plan-starter" type="radio" name="plan" value="starter"
             class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
      <label for="plan-starter" class="text-sm text-gray-700">Starter — Free</label>
    </div>
    <div class="flex items-center gap-2">
      <input id="plan-pro" type="radio" name="plan" value="pro" checked
             class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
      <label for="plan-pro" class="text-sm text-gray-700">Pro — $29/mo</label>
    </div>
    <div class="flex items-center gap-2">
      <input id="plan-enterprise" type="radio" name="plan" value="enterprise"
             class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
      <label for="plan-enterprise" class="text-sm text-gray-700">Enterprise — Custom</label>
    </div>
  </div>
</fieldset>

Grupa przycisków radiowych w stylu kart

Grupa przycisków radiowych w stylu kart umieszcza każdą opcję w klikalnej karcie zamiast wyświetlać sam przycisk radiowy. Ukryj wizualnie pole input, ale zachowaj jego dostępność, a następnie użyj utility peer, aby stylować kartę na podstawie stanu zaznaczenia pola.

peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600 na sąsiadującej karcie etykiety tworzy wyróżniony stan zaznaczenia bez konieczności używania JavaScriptu.

<div class="grid grid-cols-3 gap-3">
  <label class="cursor-pointer">
    <input type="radio" name="tier" value="starter" class="sr-only peer" />
    <div class="border-2 border-gray-200 rounded-lg p-4 text-center
                peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600
                hover:border-gray-300 transition-colors">
      <p class="font-semibold text-gray-900">Starter</p>
      <p class="text-sm text-gray-500">Free</p>
    </div>
  </label>
  <label class="cursor-pointer">
    <input type="radio" name="tier" value="pro" class="sr-only peer" checked />
    <div class="border-2 border-gray-200 rounded-lg p-4 text-center
                peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600
                hover:border-gray-300 transition-colors">
      <p class="font-semibold text-gray-900">Pro</p>
      <p class="text-sm text-gray-500">$29/mo</p>
    </div>
  </label>
</div>

Komponent przełącznika

Przełącznik to stylizowane pole wyboru, które wygląda jak przesuwny przełącznik włączania i wyłączania. Zbuduj go za pomocą <input type='checkbox'> z klasą sr-only oraz sąsiadującego elementu <div>, który używa utilities peer-checked do animacji.

Ścieżka przełącznika używa w-11 h-6 bg-gray-200 rounded-full, a jego suwak — absolutnie pozycjonowanego elementu w-4 h-4 bg-white rounded-full shadow. Utility peer-checked:translate-x-5 przesuwa suwak w prawo po zaznaczeniu pola.

<label class="flex items-center gap-3 cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only peer" />
    <div class="w-11 h-6 bg-gray-200 rounded-full transition-colors duration-200
                peer-checked:bg-blue-600"></div>
    <div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow
                transition-transform duration-200 peer-checked:translate-x-5"></div>
  </div>
  <span class="text-sm font-medium text-gray-700">Enable notifications</span>
</label>

Niestandardowa lista wyboru z wyszukiwaniem

Natywny element <select> nie obsługuje wyszukiwania. W przypadku rozwijanych list z wyszukiwaniem użyj niestandardowego połączenia pola input i listy. Wyświetl pole tekstowe, w którym użytkownik wpisuje tekst, a następnie za pomocą JavaScriptu filtruj widoczny element <ul> znajdujący się poniżej.

Ostyluj rozwijaną listę za pomocą absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto z-10, aby prawidłowo umieścić ją pod polem input.

<div class="relative">
  <input
    type="text"
    placeholder="Search country..."
    class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
  <ul class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200
              rounded-lg shadow-lg max-h-48 overflow-y-auto z-10">
    <li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">Germany</li>
    <li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">France</li>
    <li class="px-3 py-2 text-sm text-blue-600 font-medium bg-blue-50 cursor-pointer">United Kingdom</li>
    <li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">United States</li>
  </ul>
</div>

Wyłączone pole wyboru i lista wyboru

Wyłączone pola wyboru i listy wyboru używają wariantu disabled:. W przypadku pól wyboru disabled:opacity-50 disabled:cursor-not-allowed przyciemnia element. W przypadku list wyboru połącz te klasy z disabled:bg-gray-50, aby zachować wzorzec wyłączonego pola tekstowego.

Zawsze dodawaj atrybut HTML disabled — warianty Tailwind disabled: aktywują się tylko wtedy, gdy ten atrybut znajduje się na elemencie.

<!-- Disabled checkbox -->
<div class="flex items-center gap-2">
  <input
    type="checkbox"
    disabled
    class="w-4 h-4 rounded border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
  />
  <label class="text-sm text-gray-400">Unavailable option</label>
</div>

<!-- Disabled select -->
<select
  disabled
  class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
         disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed">
  <option>Disabled option</option>
</select>

Stylowanie pola zakresu

Element <input type='range'> tworzy suwak. Za pomocą wtyczki forms możesz stylować ścieżkę i uchwyt suwaka przez accent-blue-600 — właściwość CSS, która za pomocą jednego utility ustawia kolor natywnych kontrolek, takich jak suwaki zakresu, paski postępu i pola wyboru.

accent-blue-600 to najprostszy sposób na nadanie natywnym suwakom kolorystyki marki bez całkowitego zastępowania ich niestandardowymi komponentami.

<div class="flex flex-col gap-1">
  <label for="volume" class="text-sm font-medium text-gray-700">Volume: <span id="vol">50</span>%</label>
  <input
    id="volume"
    type="range"
    min="0"
    max="100"
    value="50"
    oninput="document.getElementById('vol').textContent = this.value"
    class="w-full h-2 accent-blue-600 cursor-pointer"
  />
</div>

Szybki test

Sprawdź, jak dobrze rozumiesz zagadnienia z Tailwind CSS Mastery omówione w tej lekcji.

Odpowiedz w interaktywnej lekcji

Podsumowanie lekcji

W tej lekcji nauczyłeś się, że: wtyczka @tailwindcss/forms normalizuje natywne elementy formularzy w różnych przeglądarkach, zapewniając spójną bazę do stylowania; pola wyboru i przyciski radiowe używają text-blue-600 do ustawiania koloru wypełnienia oraz focus:ring-blue-500 do tworzenia obramowań fokusu; a utility peer umożliwia tworzenie grup przycisków radiowych w stylu kart i przełączników reagujących na stan zaznaczenia bez użycia JavaScriptu. W następnej części zajmiemy się wzorcami układu formularzy.

Bezpłatny start

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
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Menu select i pola wyboru” jest bezpłatna?

Tak — pełny tekst „Menu select i pola wyboru” 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 „Menu select i pola wyboru”?

Stylować natywne listy rozwijane select i pola wyboru oraz używać pluginu @tailwindcss/forms do ujednolicania wyglądu formularzy w różnych przeglądarkach. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Menu select i pola wyboru”?

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

  1. Stylowanie pól tekstowych i textarea
  2. Menu select i pola wyboru
  3. Wzorce układów formularzy
  4. Walidacja i stany błędów
← Powrót do Tailwind CSS Academy