Valikot ja valintaruudut
Tyylitelkää natiivivalikot ja valintaruudut sekä käyttäkää @tailwindcss/forms-lisäosaa selainten välisen lomaketyylittelyn yhdenmukaistamiseen.
Valikot ja valintaruudut on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Natiivien lomakeohjainten haasteet
Natiivien <select>-, <checkbox>- ja <radio>-elementtien yhdenmukainen tyylittely eri selaimissa on tunnetusti vaikeaa. Oletuksena ne perivät käyttöjärjestelmän ulkoasun appearance-CSS-ominaisuuden avulla, jonka Tailwind nollaa appearance-none-apuluokalla.
Kun natiivin ulkoasun poistaa, saat tyylittelystä jälleen täyden hallinnan. @tailwindcss/forms-lisäosa automatisoi tämän nollauksen kaikille lomake-elementeille ja tarjoaa yhdenmukaisen selainten välisen lähtökohdan ilman, että appearance-none tarvitsee lisätä joka paikkaan käsin.
<!-- 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>Valikkoluettelon tyylittely
Tyylitelty select-elementti käyttää samoja perusluokkia kuin tekstikenttä: w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white. Lisää mukautettu pudotusvalikon nuoli sijoittamalla SVG-taustakuva tai asettamalla SVG-kuvake absoluuttisesti elementin päälle.
Kohdistustilassa käytetään tuttuja luokkia focus:outline-none focus:ring-2 focus:ring-blue-500. Lisää cursor-pointer, jotta hiiren osoitin ilmaisee valikon avautuvan napsauttamalla.
<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>Forms-lisäosan asentaminen
@tailwindcss/forms-lisäosa tarjoaa harkitun nollauksen kaikille natiiveille lomake-elementeille. Asenna se komennolla npm install -D @tailwindcss/forms ja lisää se tailwind.config.js-tiedoston plugins-taulukkoon.
Asennuksen jälkeen kaikki syötekentät, select-elementit, tekstialueet, valintaruudut ja valintanapit saavat yhdenmukaisen perustyylin. Tämän jälkeen voit lisätä Tailwindin apuluokkia ilman, että joudut taistelemaan selaimen oletustyylejä vastaan. Käytä komentoa require('@tailwindcss/forms')({ strategy: 'class' }), jos haluat lisäosan vaikuttavan vain silloin, kun lisäät tietyn luokan.
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
// Or with class strategy:
// require('@tailwindcss/forms')({ strategy: 'class' }),
],
}Valintaruutujen tyylittely
Forms-laajennus normalisoi valintaruudut valmiiksi. Sen jälkeen voit mukauttaa niiden kokoa, väriä ja pyöristystä utility-luokkien avulla. Käytä luokkia w-4 h-4 rounded text-blue-600 border-gray-300 — valintaruudun text-blue-600 määrittää valintamerkin täyttövärin.
Yhdistä valintaruutu selitteeseen käyttämällä flex items-center gap-2 -luokkia, jotta ne pysyvät vaakasuunnassa kohdakkain. Selitetekstissä käytetään luokkia 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>Valintaruutulista usean vaihtoehdon valintaan
Valintaruutulistan avulla käyttäjät voivat valita useita vaihtoehtoja. Aseta useat valintaruutukohteet päällekkäin käyttämällä säilössä space-y-3-luokkaa. Ryhmittele ne saavutettavuutta varten <fieldset>-elementin sisään ja lisää ryhmälle <legend>.
Legend-teksti tunnistaa koko ryhmän ruudunlukijoille, kun taas yksittäiset selitteet yhdistetään niitä vastaaviin valintaruutuihin for/id-attribuuttien avulla.
<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>Radiopainikkeiden tyylittely
Radiopainikkeet tyylitellään samalla tavalla kuin valintaruudut, mutta rounded-luokan sijaan käytetään rounded-full-luokkaa, jotta säilytetään käyttäjien yhden vaihtoehdon valintaan yhdistämä pyöreä ulkoasu. Myös tässä voidaan käyttää text-blue-600 -tekniikkaa täyttövärin määrittämiseen.
Kaikilla samaan ryhmään kuuluvilla radiopainikkeilla on oltava sama name-attribuutti, jotta selain pakottaa valitsemaan vain yhden vaihtoehdon.
<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>Korttityylinen radiopainikeryhmä
Korttityylinen radiopainikeryhmä ympäröi jokaisen vaihtoehdon napsautettavalla kortilla sen sijaan, että näkyvissä olisi pelkkä radiopainike. Piilota radioinput visuaalisesti, mutta säilytä sen saavutettavuus, ja käytä peer-utility-luokkaa kortin tyylittelyyn inputin valitun tilan perusteella.
Sisaruksena olevan korttiselitteen peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600 -luokat luovat korostetun valintatilan ilman JavaScriptiä.
<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>Vaihtokytkin-komponentti
Vaihtokytkin on tyylitelty valintaruutu, joka näyttää liukuvasti toimivalta päällä/pois-kytkimeltä. Rakenna se käyttämällä <input type='checkbox'> -elementtiä yhdessä sr-only-luokan ja sisaruksena olevan <div>-elementin kanssa. Käytä peer-checked-utility-luokkia animaation toteuttamiseen.
Kiskossa käytetään luokkia w-11 h-6 bg-gray-200 rounded-full ja nupissa absoluuttisesti sijoitettua yhdistelmää w-4 h-4 bg-white rounded-full shadow. peer-checked:translate-x-5 -utility siirtää nupin oikealle, kun valintaruutu on valittu.
<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>Mukautettu hakutoiminnolla varustettu valintalista
Natiivi <select> ei tue hakua. Hakutoiminnolla varustetuissa pudotusvalikoissa käytä mukautettua yhdistelmää, jossa on input ja lista. Näytä tekstikenttä, johon käyttäjä kirjoittaa, ja suodata sen alla näkyvää <ul>-listaa JavaScriptillä.
Tyylittele pudotusvalikkolista luokilla 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, jotta se sijoittuu oikein tekstikentän alapuolelle.
<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>Käytöstä poistettu valintaruutu ja valintalista
Käytöstä poistetuissa valintaruuduissa ja valintalistoissa käytetään disabled:-varianttia. Valintaruuduissa disabled:opacity-50 disabled:cursor-not-allowed himmentää elementin. Valintalistoissa yhdistä näihin disabled:bg-gray-50, jotta ulkoasu vastaa käytöstä poistetun tekstikentän tyyliä.
Lisää aina HTML:n disabled-attribuutti — Tailwindin disabled:-variantit aktivoituvat vain, kun tämä attribuutti on elementissä.
<!-- 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>Liukusäätimen tyylittely
<input type='range'> -elementti luo liukusäätimen. Forms-laajennuksen avulla voit tyylitellä kiskon ja nupin käyttämällä accent-blue-600 -luokkaa — kyseessä on CSS-ominaisuus, joka määrittää natiivien ohjauskomponenttien, kuten liukusäätimien, edistymispalkkien ja valintaruutujen, värin yhdellä utility-luokalla.
accent-blue-600 on yksinkertaisin tapa antaa natiiveille liukusäätimille oma ilme korvaamatta niitä kokonaan mukautetuilla komponenteilla.
<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>Pikatarkistus
Testaa, miten hyvin hallitset tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opit, että @tailwindcss/forms-laajennus normalisoi natiivit lomake-elementit eri selaimissa ja tarjoaa siistin lähtökohdan tyylittelylle; valintaruuduissa ja radiopainikkeissa käytetään text-blue-600 -luokkaa täyttövärin määrittämiseen ja focus:ring-blue-500 -luokkaa kohdistusrenkaisiin; ja peer-utility mahdollistaa korttityyliset radiopainikeryhmät sekä vaihtokytkimet, jotka reagoivat valittuun tilaan ilman JavaScriptiä. Seuraavaksi suunnittelemme lomakkeiden asettelumalleja.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Valikot ja valintaruudut” ilmainen?
Kyllä – oppitunnin ”Valikot ja valintaruudut” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Valikot ja valintaruudut”?
Tyylitelkää natiivivalikot ja valintaruudut sekä käyttäkää @tailwindcss/forms-lisäosaa selainten välisen lomaketyylittelyn yhdenmukaistamiseen. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Valikot ja valintaruudut”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tekstikenttien ja tekstialueiden tyylittely
- Valikot ja valintaruudut
- Lomakkeiden asettelumallit
- Validointi- ja virhetilat