Softonic

CSS-checkboxgenerator

Steg 1 / 2
Resultat

Standardcheckboxar ser olika ut på varje operativsystem och är svåra att formge om. Den här generatorn skapar ren CSS som ger en inbyggd checkbox det utseende du vill ha: välj färg för det markerade läget, kantlinjefärg, storlek och hörnradie. Eftersom stilen tillämpas på ett riktigt fält fortsätter tangentbordet, skärmläsare och formulärskickning att fungera. Kopiera den genererade CSS:en och lägg in den i din stilmall.

Så formger du en checkbox

  1. 1

    Välj färger

    Välj bakgrundsfärg för det markerade läget och kantlinjefärg för rutan.

  2. 2

    Välj storlek

    Välj en storlek mellan 12 och 48 px.

  3. 3

    Bestäm formen

    Välj hörnradie för rutan, upp till 20 px.

  4. 4

    Kopiera CSS:en

    Förhandsvisa bocken och kopiera den genererade regeln till din stilmall.

Vad den genererade CSS:en gör

Regeln tillämpas direkt på fältet med appearance: none, som tar bort standardutseendet så att rutan kan formges:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

När checkboxen är markerad fylls rutan med den valda färgen och en vit bock visas, ritad med CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Varför ett inbyggt fält

Stilen ersätter aldrig elementet med en div: det riktiga <input type="checkbox"> behåller sin tangentbordsaktivering, skärmläsarstöd och formulärskickning. appearance: none ändrar bara utseendet. Om du behöver stöd för äldre Safari-versioner lägger du till -webkit-appearance: none i regeln.

Fokus och hovring

Den genererade regeln innehåller en mjuk färgövergång men inga stilar för hovring eller fokus. Lägg till egna regler för :hover och :focus-visible så att tangentbordsanvändare alltid ser var fokus ligger, till exempel en färgad ram runt rutan.

Bocken

Bocken är en liten vit linje som roteras 45 grader. Behöver du en annan färg eller ett tunnare eller tjockare streck redigerar du värdena border och border-width i ::after-regeln.

Vanliga frågor

Nej. Den ger bara CSS. Applicera klassen på ett riktigt fält i ditt formulär, med eller utan synlig etikett.

Ja. Regeln använder appearance: none på det inbyggda fältet, så värdet skickas som vanligt och stödet för tangentbord och skärmläsare finns kvar.

Storleken ställer du in i generatorn, från 12 till 48 px. Bockens färg och tjocklek redigeras i ::after-regeln i den genererade CSS:en.

För pekytor siktar du på minst 24 px, helst 44 px precis som andra kontroller. Håll rutan i linje med etiketttexten i din design.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Verktyget finns på andra språk