Väljmenyer och kryssrutor
Formatera inbyggda väljmenyer och kryssrutor och använd pluginet @tailwindcss/forms för att skapa enhetlig formulärformatering i olika webbläsare.
Väljmenyer och kryssrutor är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Utmaningen med inbyggda formulärkontroller
Inbyggda element som <select>, <checkbox> och <radio> är notoriskt svåra att formge enhetligt i olika webbläsare. Som standard ärver de operativsystemets utseende genom CSS-egenskapen appearance, som Tailwind återställer med verktyget appearance-none.
När det inbyggda utseendet har tagits bort får du full kontroll över formgivningen. Plugin-programmet @tailwindcss/forms automatiserar denna återställning för alla formulärelement och ger dig en ren, webbläsaroberoende bas utan att du manuellt behöver lägga till appearance-none överallt.
<!-- 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>Formge en listruta
En formgiven listruta använder samma grundklasser som ett textfält: w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white. Lägg till en anpassad nedåtpil genom att positionera en SVG-bild som bakgrund eller lägga en absolut positionerad SVG-ikon ovanpå.
Fokustillståndet använder den välbekanta focus:outline-none focus:ring-2 focus:ring-blue-500. Lägg till cursor-pointer så att muspekaren visar att ett klick öppnar en meny.
<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>Installera Forms-pluginprogrammet
Plugin-programmet @tailwindcss/forms tillhandahåller en fördefinierad återställning för alla inbyggda formulärelement. Installera det med npm install -D @tailwindcss/forms och lägg till det i arrayen plugins i tailwind.config.js.
När plugin-programmet har installerats får alla inmatningsfält, listrutor, textområden, kryssrutor och alternativknappar en enhetlig grundstil. Därefter kan du lägga Tailwind-verktyg ovanpå utan att behöva kämpa mot webbläsarens standardstilar. Använd require('@tailwindcss/forms')({ strategy: 'class' }) om du föredrar att plugin-programmet bara ska tillämpas när du lägger till en specifik klass.
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
// Or with class strategy:
// require('@tailwindcss/forms')({ strategy: 'class' }),
],
}Formge kryssrutor
Med forms-pluginet är kryssrutor redan normaliserade. Därefter kan du anpassa deras storlek, färg och rundning med utilities. Använd w-4 h-4 rounded text-blue-600 border-gray-300 — text-blue-600 på en kryssruta anger fyllningsfärgen för bockmarkeringen.
Kombinera kryssrutan med en etikett genom att använda flex items-center gap-2 så att de förblir horisontellt justerade. Etiketttexten använder 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>Kryssrutelista för flerval
En kryssrutelista låter användare välja flera alternativ. Stapla flera kryssruteobjekt med space-y-3 på containern. Gruppera dem i ett <fieldset> med en <legend> för bättre tillgänglighet.
Legend-texten identifierar hela gruppen för skärmläsare, medan de enskilda etiketterna kopplas till sina specifika kryssrutor via attributen 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>Styla alternativknappar
Alternativknappar stylas på samma sätt som kryssrutor, men använder rounded-full i stället för rounded för att behålla det cirkulära utseende som användare förknippar med val av ett enda alternativ. Knepet med text-blue-600 fungerar även här för fyllningsfärgen.
Alla alternativknappar i samma grupp måste ha samma name-attribut, så att webbläsaren upprätthåller begränsningen att endast ett alternativ kan väljas.
<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>Alternativknappsgrupp i kortstil
En alternativknappsgrupp i kortstil omsluter varje alternativ i ett klickbart kort i stället för att visa en fristående alternativknapp. Dölj alternativknappens inmatningsfält visuellt, men behåll det tillgängligt, och använd utilityn peer för att styla kortet utifrån om inmatningsfältet är valt.
peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600 på det associerade etikettkortet skapar ett markerat valt tillstånd utan att någon JavaScript krävs.
<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>Växlingskomponent
En växlingsknapp är en stylad kryssruta som ser ut som en skjutbar på/av-knapp. Bygg den med ett <input type='checkbox'> med sr-only och ett associerat <div> som använder peer-checked-utilities för animeringen.
Skenan använder w-11 h-6 bg-gray-200 rounded-full, och knappen använder w-4 h-4 bg-white rounded-full shadow med absolut positionering. Utilityn peer-checked:translate-x-5 skjuter knappen åt höger när den är vald.
<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>Anpassat select-fält med sökning
Det inbyggda <select>-elementet stöder inte sökning. För sökbara rullgardinsmenyer använder du en anpassad kombination av ett inmatningsfält + lista. Visa ett textfält där användaren skriver och filtrera en synlig <ul> under det med JavaScript.
Styla rullgardinslistan med 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 så att den placeras korrekt under inmatningsfältet.
<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>Inaktiverad kryssruta och select-fält
Inaktiverade kryssrutor och select-fält använder varianten disabled:. För kryssrutor gör disabled:opacity-50 disabled:cursor-not-allowed elementet nedtonat. För select-fält kombinerar du dessa med disabled:bg-gray-50 för att följa samma mönster som för inaktiverade textfält.
Lägg alltid till HTML-attributet disabled — Tailwinds disabled:-varianter aktiveras endast när attributet finns på elementet.
<!-- 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>Styla range-inmatning
Elementet <input type='range'> skapar ett skjutreglage. Med forms-pluginet kan du styla skenan och reglaget med accent-blue-600 — en CSS-egenskap som anger färgen för inbyggda kontroller som range-reglage, förloppsindikatorer och kryssrutor med en enda utility.
accent-blue-600 är det enklaste sättet att ge inbyggda skjutreglage ett enhetligt utseende utan att helt ersätta dem med anpassade komponenter.
<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>Snabbtest
Testa dina kunskaper om koncepten i Tailwind CSS Mastery från den här lektionen.
Lektionssammanfattning
I den här lektionen lärde du dig följande: pluginet @tailwindcss/forms normaliserar inbyggda formulärelement i olika webbläsare och ger en ren utgångspunkt för styling; kryssrutor och alternativknappar använder text-blue-600 för att ange fyllningsfärgen och focus:ring-blue-500 för fokusramar; och peer-utilityn möjliggör alternativknappsgrupper i kortstil och växlingsknappar som reagerar på valt tillstånd utan JavaScript. Nästa steg är att utforma layoutmönster för formulär.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Väljmenyer och kryssrutor” gratis?
Ja – hela texten till ”Väljmenyer och kryssrutor” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Väljmenyer och kryssrutor”?
Formatera inbyggda väljmenyer och kryssrutor och använd pluginet @tailwindcss/forms för att skapa enhetlig formulärformatering i olika webbläsare. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Väljmenyer och kryssrutor”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Formatera textfält och textområden
- Väljmenyer och kryssrutor
- Mönster för formulärlayouter
- Validering och feltillstånd