Valgmenyer og avkrysningsbokser
Style innebygde nedtrekksmenyer og avkrysningsbokser, og bruk @tailwindcss/forms-pluginen til å standardisere skjemastiler på tvers av nettlesere.
Valgmenyer og avkrysningsbokser er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Utfordringen med innebygde skjemakontroller
Innebygde <select>-, <checkbox>- og <radio>-elementer er notorisk vanskelige å style konsekvent på tvers av nettlesere. Som standard arver de operativsystemets utseende gjennom CSS-egenskapen appearance, som Tailwind tilbakestiller med verktøyklassen appearance-none.
Når du fjerner det innebygde utseendet, får du full kontroll over stilsettingen. Programtillegget @tailwindcss/forms automatiserer denne tilbakestillingen for alle skjem elementer, slik at du får et rent utgangspunkt på tvers av nettlesere uten å måtte legge til appearance-none overalt manuelt.
<!-- 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>Stilsetting av en nedtrekksliste
En utformet select bruker de samme grunnklassene som et tekstfelt: w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white. Legg til en egendefinert pil for nedtrekkslisten ved å plassere et SVG-bakgrunnsbilde eller legge et absolutt posisjonert SVG-ikon oppå.
Fokustilstanden bruker den kjente focus:outline-none focus:ring-2 focus:ring-blue-500. Legg til cursor-pointer, slik at musepekeren viser at et klikk åpner 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>Installere Forms-programtillegget
Programtillegget @tailwindcss/forms tilbyr en gjennomtenkt tilbakestilling for alle innebygde skjem elementer. Installer det med npm install -D @tailwindcss/forms, og legg det til i plugins-matrisen i tailwind.config.js.
Når programtillegget er installert, får alle inndatafelt, select-elementer, tekstområder, avmerkingsbokser og alternativknapper en konsistent grunnstil. Deretter kan du legge Tailwind-verktøyklasser oppå uten å måtte kjempe mot nettleserens standardstiler. Bruk require('@tailwindcss/forms')({ strategy: 'class' }) hvis du foretrekker at programtillegget bare skal brukes når du legger til en bestemt klasse.
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
// Or with class strategy:
// require('@tailwindcss/forms')({ strategy: 'class' }),
],
}Stilsetting av avmerkingsbokser
Med forms-pluginen er avmerkingsbokser allerede normalisert. Deretter kan De tilpasse størrelse, farge og avrunding med verktøyklasser. Bruk w-4 h-4 rounded text-blue-600 border-gray-300 — text-blue-600 på en avmerkingsboks angir fyllfargen til avkrysningsmerket.
Kombiner avmerkingsboksen med en etikett ved hjelp av flex items-center gap-2 for å holde dem vannrett justert. Etikettteksten bruker 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>Liste med avmerkingsbokser for flervalg
En liste med avmerkingsbokser lar brukerne velge flere alternativer. Stable flere avmerkingsbokser med space-y-3 på beholderen. Grupper dem i et <fieldset> med en <legend> av hensyn til tilgjengeligheten.
Legend-teksten identifiserer hele gruppen for skjermlesere, mens individuelle etiketter knyttes til de spesifikke avmerkingsboksene via attributtene 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>Stilsetting av radioknapper
Radioknapper styles på samme måte som avmerkingsbokser, men bruker rounded-full i stedet for rounded for å beholde det runde utseendet brukerne forbinder med enkeltvalg. Trikset med text-blue-600 fungerer også her for fyllfargen.
Alle radioknapper i samme gruppe må ha det samme name-attributtet, slik at nettleseren håndhever begrensningen om enkeltvalg.
<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>Radiogruppe i kortstil
En radiogruppe i kortstil omslutter hvert alternativ i et klikkbart kort i stedet for å vise en frittstående radioknapp. Skjul radioinput-feltet visuelt, men behold det tilgjengelig, og bruk verktøyklassen peer til å style kortet basert på om input-feltet er valgt.
peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600 på etikettkortet som er søskenet, oppretter en fremhevet valgt tilstand uten behov for JavaScript.
<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 for bryter
En bryter er en stylet avmerkingsboks som ser ut som en av/på-bryter som skyves. Bygg den med en <input type='checkbox'> med sr-only og en tilhørende <div> som bruker peer-checked-verktøyklasser til animasjon.
Sporfeltet bruker w-11 h-6 bg-gray-200 rounded-full, mens knotten bruker en absolutt posisjonert w-4 h-4 bg-white rounded-full shadow. Verktøyklassen peer-checked:translate-x-5 skyver knotten mot høyre når den er valgt.
<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>Egendefinert select-felt med søk
Det innebygde <select>-elementet støtter ikke søk. For søkbare rullegardinlister kan De bruke en egendefinert kombinasjon av et inputfelt og en liste. Vis et tekstfelt der brukeren skriver, og filtrer en synlig <ul> under det med JavaScript.
Style rullegardinlisten 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 for å plassere den riktig under inputfeltet.
<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>Deaktivert avmerkingsboks og select-felt
Deaktiverte avmerkingsbokser og select-felt bruker varianten disabled:. For avmerkingsbokser gjør disabled:opacity-50 disabled:cursor-not-allowed elementet mindre fremtredende. For select-felt kombineres disse med disabled:bg-gray-50 for å samsvare med mønsteret for deaktiverte tekstfelt.
Legg alltid til HTML-attributtet disabled — Tailwinds disabled:-varianter aktiveres bare når dette attributtet finnes 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>Stilsetting av range-input
Elementet <input type='range'> oppretter en glidebryter. Med forms-pluginen kan De style sporet og knotten ved hjelp av accent-blue-600 — en CSS-egenskap som angir fargen på innebygde kontroller som glidebrytere, fremdriftsindikatorer og avmerkingsbokser med én verktøyklasse.
accent-blue-600 er den enkleste måten å gi innebygde glidebrytere en profilert stil uten å erstatte dem fullstendig med egendefinerte 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>Kunnskapssjekk
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at @tailwindcss/forms-pluginen normaliserer innebygde skjemaelementer på tvers av nettlesere og gir et rent utgangspunkt for stilsetting; avmerkingsbokser og radioknapper bruker text-blue-600 til å angi fyllfargen og focus:ring-blue-500 til fokusringer; og at peer-verktøyklassen gjør det mulig å lage radiogrupper i kortstil og brytere som reagerer på valgt tilstand uten JavaScript. Neste tema er utforming av mønstre for skjemalayout.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Valgmenyer og avkrysningsbokser» gratis?
Ja – hele teksten i «Valgmenyer og avkrysningsbokser» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Valgmenyer og avkrysningsbokser»?
Style innebygde nedtrekksmenyer og avkrysningsbokser, og bruk @tailwindcss/forms-pluginen til å standardisere skjemastiler på tvers av nettlesere. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Valgmenyer og avkrysningsbokser»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Style tekstfelt og tekstområder
- Valgmenyer og avkrysningsbokser
- Mønstre for skjemalayout
- Validerings- og feiltilstander