Focus- og focus-visible-varianter
Bruk focus:*-stiler for tastaturnavigasjon og focus-visible:* for å vise fokusringer bare for tastaturbrukere, ikke ved museklikk.
Focus- og focus-visible-varianter 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.
Betydningen av fokusstiler
Tastaturnavigasjon brukes av personer med motoriske funksjonsnedsettelser, erfarne brukere og alle som fyller ut et langt skjema. Når et element får fokus via tastaturet, fremhever nettleseren det med en fokusmarkering. CSS-pseudoklassen :focus utløses ved enhver fokushendelse, mens :focus-visible bare utløses når nettleseren vurderer at en synlig fokusmarkering er nyttig – vanligvis ved tastaturnavigasjon. Tailwind tilbyr begge som variantprefiksene focus: og focus-visible:.
<!-- focus-visible is the accessible modern choice -->
<div class="flex gap-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Tab to me
</button>
</div>Grunnleggende om focus:-varianten
Varianten focus: bruker en stil hver gang elementet får fokus, uavhengig av hvordan – ved museklikk, berøring eller tastatur. Den vanligste bruken er å fjerne nettleserens standardfokuskontur og erstatte den med en egendefinert ring: focus:outline-none focus:ring-2 focus:ring-blue-500. Selv om dette er praktisk, har mønsteret en ulempe: Musebrukere ser også ringen ved klikk, noe enkelte designere oppfatter som visuelt forstyrrende.
<!-- focus: fires on both mouse click and keyboard tab -->
<div class="space-y-3 max-w-sm">
<input
type="text"
placeholder="Click or tab to focus"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
<button class="w-full bg-gray-200 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">
Focus-on-click-too button
</button>
</div>focus-visible: Den moderne tilnærmingen
focus-visible: tilsvarer CSS-pseudoklassen :focus-visible. Nettlesere bruker denne bare når de vurderer at det er riktig å vise en fokusmarkering – det vil si ved tastaturnavigasjon, men vanligvis ikke ved museklikk på knapper. Dermed får De det beste fra begge verdener: Musebrukere ser ikke ringen, mens tastaturbrukere alltid får tydelig tilbakemelding. Dette er den anbefalte tilnærmingen i alle moderne Tailwind-prosjekter.
<!-- focus-visible: only shows ring for keyboard, not mouse -->
<div class="space-y-3 max-w-sm">
<!-- Try: click with mouse (no ring) vs Tab key (ring appears) -->
<button class="w-full bg-blue-500 text-white py-2 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Smart focus (use Tab key)
</button>
<input
type="text"
placeholder="Input: ring on keyboard focus"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
/>
</div>Konvensjoner for egendefinert fokusfarge
Velg fokusringfarger som har kontrast mot både elementet og bakgrunnen på siden. Ringer i merkevarefarger fungerer godt: focus-visible:ring-indigo-500 for et indigo-preget produkt. Ved feiltilstander kan De bruke focus:ring-red-500 på ugyldige inndatafelt. I mørk modus må De vurdere om ringfargen har tilstrekkelig kontrast mot mørke bakgrunner – lyse ringer (ring-white eller ring-blue-300) fungerer bedre på mørke flater.
<!-- Focus colors for different contexts -->
<div class="space-y-4 max-w-sm">
<!-- Normal: brand color ring -->
<input class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Brand focus" />
<!-- Success: green ring -->
<input class="w-full border border-green-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 bg-green-50" placeholder="Valid input" />
<!-- Error: red ring -->
<input class="w-full border border-red-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 bg-red-50" placeholder="Invalid input" />
</div>Fokusstiler for lenker
Lenker er blant de viktigste elementene som kan navigeres med tastaturet. Nettlesere bruker som standard en fokuskontur på lenker, men De kan ønske å tilpasse den slik at den passer til designet. Mønsteret focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded lager en ren ring som ligger tett rundt tekstlenker i løpende tekst, slik at de er tydelige under tastaturnavigasjon.
<!-- Accessible link focus styles -->
<p class="text-gray-700 leading-relaxed max-w-prose">
Visit our
<a href="#" class="text-blue-600 underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded">
documentation
</a>
to learn more about
<a href="#" class="text-blue-600 underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded">
getting started
</a>
with our product.
</p>Focus Within – overordnet element reagerer på fokus i underordnet element
focus-within: brukes på et overordnet element når et hvilket som helst av de underordnede elementene har fokus. Dette er nyttig for å fremheve en hel skjemafeltbeholder (etikett + inndatafelt + hjelpetekst) når inndatafeltet får fokus, ikke bare selve inndatafeltet. Den visuelle gruppen utvides for å vise hvilken skjemafeltgruppe som er aktiv, noe som gjør komplekse skjemaer enklere å navigere.
<!-- Entire form group highlights when input is focused -->
<div class="space-y-3 max-w-sm">
<!-- Container gets ring when child input is focused -->
<div class="border border-gray-200 rounded-xl p-3 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 transition-all">
<label class="block text-xs font-medium text-gray-500 mb-1">Email Address</label>
<input
type="email"
class="w-full focus:outline-none text-gray-800"
placeholder="you@example.com"
/>
</div>
<div class="border border-gray-200 rounded-xl p-3 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 transition-all">
<label class="block text-xs font-medium text-gray-500 mb-1">Password</label>
<input
type="password"
class="w-full focus:outline-none text-gray-800"
placeholder="••••••••"
/>
</div>
</div>Fokus og overgang for jevne ringer
Endringer i ring og kantlinje ved fokus kan animeres med Tailwinds overgangsverktøyklasser. transition-shadow animerer skyggen (som ringer bruker internt), og transition-colors animerer endringer i kantlinjefarge. Ved å angi duration-150 for en rask overgang på 150 ms får De fokusstiler som føles umiddelbare og responsive uten å virke brå – den riktige balansen for interaktive skjemafelt.
<!-- Smoothly animated focus rings -->
<div class="space-y-4 max-w-sm p-4">
<input
type="text"
placeholder="Focus with smooth transition"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-150"
/>
<textarea
placeholder="Textarea with focus transition"
rows="3"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-150 resize-none"
></textarea>
</div>Deaktivere fokusstiler på en ansvarlig måte
De kan møte designønsker om å fjerne fokuskonturer helt – motstå dette med mindre De tilbyr et alternativ. focus:outline-none alene bryter med WCAG 2.1-suksesskriterium 2.4.7 (Synlig fokus). Koble det alltid sammen med en egendefinert ring, en endring av kantlinje eller bakgrunn, eller en annen synlig markering. Mønsteret focus:outline-none focus-visible:ring-2 er den ansvarlige måten å fjerne standardkonturen på samtidig som tilgjengeligheten opprettholdes.
<!-- ❌ Bad: removes focus with no replacement -->
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none">
Inaccessible (no focus indicator)
</button>
<!-- ✅ Good: replaces with custom ring -->
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Accessible (custom ring)
</button>Fokus i select- og avmerkingsbokselementer
Innebygde skjemakontroller som select, checkbox og radio reagerer også på fokusvarianter. For select-felt er mønsteret det samme som for input-felt: focus:outline-none focus:ring-2 focus:ring-blue-500. For avmerkingsbokser omkranser ringen firkanten, og for radioknapper omkranser den sirkelen. Programtillegget @tailwindcss/forms gir bedre standardinnstillinger for disse elementene på tvers av nettlesere.
<!-- Focus styles on different form controls -->
<div class="space-y-4 max-w-sm">
<!-- Select -->
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<!-- Checkboxes -->
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" />
<span>Agree to terms</span>
</label>
<!-- Radio -->
<label class="flex items-center gap-3 cursor-pointer">
<input type="radio" name="plan" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" />
<span>Monthly plan</span>
</label>
</div>Hopp over navigasjonslenker
Lenker for å hoppe over navigasjonen er det første fokuserbare elementet på en side. De gjør det mulig for tastaturbrukere å gå direkte til hovedinnholdet og hoppe over navigasjonen. De er som standard skjult visuelt, men blir synlige når de får fokus. Mønsteret bruker sr-only sammen med focus:not-sr-only focus:absolute for å vise lenken først når en tastaturbruker tabber til den. Dette er et krav for samsvar med WCAG 2.4.1.
<!-- Skip navigation link: visible only on keyboard focus -->
<a
href="#main-content"
class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-blue-500 text-white px-4 py-2 rounded font-medium z-50"
>
Skip to main content
</a>
<nav class="bg-gray-800 text-white px-6 py-4">
<!-- Navigation items -->
</nav>
<main id="main-content" class="p-6">
Main content here
</main>Fokusstiler i mørk modus
Fokusringer som er utformet for lys modus, kan forsvinne eller få dårligere kontrast i mørk modus. Bruk Tailwinds dark:-variant for å bytte ringfarge: focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 bruker en litt lysere blåfarge i mørk modus for bedre kontrast mot mørke bakgrunner. Alternativt kan De bruke hvite ringer på mørke flater: dark:focus-visible:ring-white.
<!-- Focus rings for both light and dark mode -->
<div class="p-6 bg-white dark:bg-gray-900 space-y-3">
<input
type="text"
placeholder="Adaptive focus ring"
class="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:border-blue-500 max-w-sm"
/>
</div>Hurtigsjekk
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De: focus: utløses ved enhver fokushendelse, mens focus-visible: bare utløses ved tastaturnavigasjon, focus-within: fremhever et overordnet element når et hvilket som helst underordnet element har fokus – nyttig for grupper av skjemafelt, og focus:outline-none må alltid kombineres med en egendefinert ring for å opprettholde WCAG-tilgjengelighet. Deretter skal vi se på disabled- og placeholder-varianter for styling av skjemaelementer.
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 «Focus- og focus-visible-varianter» gratis?
Ja – hele teksten i «Focus- og focus-visible-varianter» 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 «Focus- og focus-visible-varianter»?
Bruk focus:*-stiler for tastaturnavigasjon og focus-visible:* for å vise fokusringer bare for tastaturbrukere, ikke ved museklikk. 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 «Focus- og focus-visible-varianter»?
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
- Hover- og active-varianter
- Focus- og focus-visible-varianter
- Disabled- og placeholder-varianter
- Group- og peer-varianter