CSS Checkbox-generator

Vad är detta verktyg?

Webbläsarens standardkryssrutor ser olika ut i varje webbläsare och är svåra att omstilisera direkt, eftersom deras inbyggda utseende ritas av operativsystemet snarare än av ren CSS. Standardlösningen är att visuellt dölja den ursprungliga kryssrutan och istället stilisera ett syskonelement, styrt av kryssrutans :checked-tillstånd — inputen förblir fullt fungerande och tillgänglig, bara utseendet ändras.

Det här verktyget bygger det mönstret för tre vanliga kryssrutestilar: en rundad ruta med en animerad bock, en iOS-liknande glidande växlingsknapp, och en fylld cirkel (radioknappsliknande) stil. Klicka på kryssrutan i förhandsvisningen för att se det ikryssade tillståndet, justera storlek och accentfärg, kopiera sedan CSS:en.

Källa: Selectors Level 4, W3C — specifikationen som definierar :checked-pseudoklassen den här tekniken bygger på.

Varför använda det?

• Levande, klickbar förhandsvisning — växla kryssrutan för att se exakt hur de ikryssade och urkryssade tillstånden ser ut.
• Tre distinkta, vanligt använda stilar i ett verktyg: bockruta, växlingsknapp och fylld cirkel.
• Det underliggande elementet förblir en riktig <input type="checkbox">, så tangentbordsnavigering, formulärinlämning och skärmläsare fortsätter fungera normalt.
• Justerbar storlek och accentfärg, genererade direkt in i CSS-värdena istället för att lämnas som variabler att fylla i.
• Inget ikontypsnitt, ingen SVG-fil eller bild behövs — bocken och knappen ritas med ren CSS-ram och pseudo-element.
• Gratis, körs i din webbläsare, ingen registrering.

Så använder du det

1. Välj en stil: rundad bock, växlingsknapp eller fylld cirkel.
2. Dra i storleksreglaget för att skala upp eller ner kryssrutan.
3. Välj en accentfärg — den blir bakgrunds- och ramfärg för det ikryssade tillståndet.
4. Klicka på kryssrutan i förhandsvisningspanelen för att bekräfta att både det ikryssade och urkryssade tillståndet ser rätt ut.
5. Kopiera den genererade CSS:en till din stilmall och använd den på valfri <input type="checkbox"> inbäddad på samma sätt som förhandsvisningens markup.

Exempel

Inmatning

Stil: rundad bock · Storlek: 24px · Färg: orange

Resultat

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

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

Kryssruteinputen döljs visuellt; den synliga rutan är en syskon-<span> stiliserad utifrån inputens :checked-tillstånd, med en liten roterad ram inritad som bocken när den kryssas i.

Varför dölja den ursprungliga kryssrutan istället för att ta bort den

Det är frestande att hoppa över den riktiga <input> och bygga en kryssruta enbart av en stiliserad <div> med en klickhanterare, men det förlorar gratis tangentbordsstöd, formulärinlämning och skärmläsarsemantik. Mönstret det här verktyget genererar behåller den riktiga kryssruteinputen i markup — bara visuellt dold med opacity: 0 och omplacerad — så webbläsaren fortfarande behandlar den som en äkta kryssruta i alla avseenden som spelar roll, medan ett syskonelement hanterar den synliga stiliseringen.

De tre stilarna i korthet

• Rundad bock: ett bekant kvadrat-med-bock-mönster, vanligast för formulärfält, samtyckesrutor och flervalslistor.
• Växlingsknapp: läses som en direkt på/av-inställning snarare än ett formulärfält — bäst för preferenser och inställningsskärmar snarare än kryssrutelistor.
• Fylld cirkel: ett minimalistiskt, radioknappsliknande utseende, användbart när en kvadratisk ruta skulle kännas visuellt tung mot rundade UI-element i närheten.

Matcha den mot resten av ditt gränssnitt

Den genererade accentfärgen påverkar bara det ikryssade tillståndet — välj vad som helst som är ditt varumärkes eller knappfärg så att kryssrutan känns konsekvent med resten av sidan. Kombinera den med samma border-radius som används på andra ställen i gränssnittet för ett mer sammanhängande utseende.

→ Border Radius-generator · Färgväljare

Vanliga frågor