CSS-checkboks-generator

Vælg en checkboks-stil, indstil størrelse og accentfarve, og dette værktøj genererer CSS'en til at erstatte en almindelig browser-checkboks med én, der er brugerdefineret stylet, men stadig fuldt klikbar og tilgængelig — ingen ikonskrifttyper eller billeder nødvendige.

Hvad er dette værktøj?

Browserens standard-checkbokse ser forskellige ud i hver browser og er svære at omstyle direkte, da deres indbyggede udseende tegnes af operativsystemet frem for af almindelig CSS. Den gængse løsning er at skjule den native checkboks visuelt og style et søskendeelement i stedet, styret af checkboksens :checked-tilstand — inputtet forbliver fuldt funktionelt og tilgængeligt, kun udseendet ændres.

Dette værktøj bygger det mønster til tre almindelige checkboks-stile: en afrundet boks med et animeret flueben, en iOS-agtig glidende kontakt-switch, og en udfyldt cirkel (radio-agtig) stil. Klik på checkboksen i forhåndsvisningen for at se den afkrydsede tilstand, justér størrelse og accentfarve, og kopiér derefter CSS'en.

Kilde: Selectors Level 4, W3C — specifikationen, der definerer :checked-pseudoklassen, som denne teknik bygger på.

Hvorfor bruge det?

Live, klikbar forhåndsvisning — slå checkboksen til/fra for at se præcis, hvordan den afkrydsede og ikke-afkrydsede tilstand ser ud.
Tre distinkte, ofte brugte stile i ét værktøj: flueben-boks, kontakt-switch og udfyldt cirkel.
Det underliggende element forbliver et rigtigt <input type="checkbox">, så tastaturnavigation, formularindsendelse og skærmlæsere fortsat fungerer normalt.
Justerbar størrelse og accentfarve, genereret direkte ind i CSS-værdierne frem for efterladt som variabler, du selv skal udfylde.
Ingen ikonskrifttype, SVG-fil eller billede nødvendigt — fluebenet og knappen tegnes med almindelige CSS-kanter og pseudo-elementer.
Gratis, kører i din browser, ingen tilmelding.

Sådan bruger du det

Vælg en stil: afrundet flueben, kontakt-switch eller udfyldt cirkel.
Træk størrelses-skyderen for at skalere checkboksen op eller ned.
Vælg en accentfarve — denne bliver baggrunds- og kantfarven i afkrydset tilstand.
Klik på checkboksen i forhåndsvisningspanelet for at bekræfte, at både den afkrydsede og ikke-afkrydsede tilstand ser rigtige ud.
Kopiér den genererede CSS ind i dit stylesheet, og brug den på et hvilket som helst <input type="checkbox">, der er indpakket på samme måde som forhåndsvisningens markup.

Eksempel

Input

Stil: afrundet flueben · Størrelse: 24px · Farve: orange

Output

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Checkbox-inputtet er visuelt skjult; den synlige boks er et søsken-<span>, der styles ud fra inputtets :checked-tilstand, med en lille roteret kant tegnet ind som fluebenet, når det er afkrydset.

Hvorfor skjule den native checkboks i stedet for at fjerne den

Det er fristende at springe det rigtige <input> over og bygge en checkboks udelukkende ud af en stylet <div> med en klikhandler, men det mister gratis tastaturunderstøttelse, formularindsendelse og semantik for skærmlæsere. Mønsteret, dette værktøj genererer, beholder det rigtige checkbox-input i markuppen — bare visuelt skjult med opacity: 0 og placeret om — så browseren stadig behandler det som en ægte checkboks i enhver henseende, der betyder noget, mens et søskendeelement håndterer den synlige styling.

De tre stile i overblik

Afrundet flueben: et velkendt firkant-med-flueben-mønster, mest almindeligt til formularfelter, samtykke-afkrydsningsfelter og multi-valg-lister.
Kontakt-switch: opleves som en øjeblikkelig til/fra-indstilling frem for et formularfelt — bedst til præferencer og indstillingsskærme frem for lister af afkrydsningsfelter.
Udfyldt cirkel: et minimalt, radioknap-agtigt udseende, nyttigt når en firkantet boks ville føles visuelt tung ved siden af afrundede UI-elementer i nærheden.

At matche den med resten af din UI

Den genererede accentfarve påvirker kun den afkrydsede tilstand — vælg den farve, der matcher dit brand eller dine knapper, så checkboksen føles konsistent med resten af siden. Kombinér den med samme border-radius, som bruges andre steder i grænsefladen, for et mere sammenhængende udseende.

→ Border Radius-generator · Farvevælger

Ofte stillede spørgsmål

Er den stylede checkboks stadig tilgængelig?

Ja — det underliggende element er et rigtigt <input type="checkbox">, kun visuelt skjult frem for fjernet. Det modtager stadig fokus, reagerer på tastaturinput (mellemrum for at slå til/fra) og annonceres korrekt af skærmlæsere, da hjælpeteknologi læser input-elementet, ikke det stylede span ved siden af.

Hvorfor bruger CSS'en en søskende-selector som input:checked + .mark?

Fordi den synlige boks er et separat element fra det faktiske checkbox-input, har CSS brug for en måde at style det søskendeelement på baseret på inputtets tilstand. +-kombinatoren vælger elementet umiddelbart efter det afkrydsede input, hvilket er standardteknikken til at bygge brugerdefinerede checkbox- og radioknap-stile uden JavaScript.

Kan jeg bruge dette på en rigtig formular, ikke bare en demo?

Ja — kopiér den genererede CSS, og indpak et rigtigt formular-checkbox-input i den samme markup-struktur som vist i HTML'en/forhåndsvisningen. Da det stadig er en native checkboks, indsendes den med formularen præcis som en ustylet ville gøre, og fungerer med eksisterende formularvalideringslogik.

Hvorfor er fluebenet animeret i den afrundede stil?

En kort scale-in-animation på fluebenet gør den afkrydsede tilstand mere bevidst og responsiv end en øjeblikkelig fremkomst/forsvinden, hvilket er et almindeligt mønster i polerede UI-checkbokse. Det er en lille CSS keyframes-regel, der er inkluderet med resten af den genererede kode.

Kræver kontakt-switch-stilen anden HTML?

Nej — alle tre stile bruger samme underliggende markup (et skjult checkbox-input plus et søskendeelement til den synlige form). At skifte stil i dette værktøj ændrer kun CSS-reglerne, der anvendes på samme struktur, så du kan skifte stil senere uden at røre din HTML.