CSS-avkrysningsboks-generator

Hva er dette verktøyet?

Avkrysningsbokser med nettleserens standardutseende ser forskjellige ut fra nettleser til nettleser og er vanskelige å style direkte, siden det innebygde utseendet tegnes av operativsystemet og ikke av ren CSS. Den vanlige løsningen er å skjule den native avkrysningsboksen visuelt og style et søskenelement i stedet, styrt av boksens :checked-tilstand — inputen forblir fullt funksjonell og tilgjengelig, det er bare utseendet som endres.

Dette verktøyet bygger dette mønsteret for tre vanlige avkrysningsstiler: en avrundet boks med en animert hake, en glidende bryter i iOS-stil, og en fylt sirkel (radioknapp-lignende). Klikk på avkrysningsboksen i forhåndsvisningen for å se den avkrysnede tilstanden, juster størrelse og aksentfarge, og kopier deretter CSS-en.

Kilde: Selectors Level 4, W3C — spesifikasjonen som definerer :checked-pseudoklassen denne teknikken bygger på.

Hvorfor bruke det?

• Live, klikkbar forhåndsvisning — kryss av boksen for å se nøyaktig hvordan avkrysset og ikke-avkrysset tilstand ser ut.
• Tre distinkte, mye brukte stiler i ett verktøy: hake-boks, bryter og fylt sirkel.
• Det underliggende elementet forblir en ekte <input type="checkbox">, så tastaturnavigasjon, skjemainnsending og skjermlesere fungerer som normalt.
• Justerbar størrelse og aksentfarge, generert direkte inn i CSS-verdiene i stedet for å stå igjen som variabler du må fylle inn.
• Ingen ikonfont, SVG-fil eller bilde nødvendig — haken og bryterknappen tegnes med rene CSS-kanter og pseudo-elementer.
• Gratis, kjører i nettleseren din, ingen registrering.

Slik bruker du det

1. Velg en stil: avrundet hake, bryter eller fylt sirkel.
2. Dra størrelsesglideren for å skalere avkrysningsboksen opp eller ned.
3. Velg en aksentfarge — denne blir bakgrunns- og kantfargen i avkrysset tilstand.
4. Klikk på avkrysningsboksen i forhåndsvisningspanelet for å bekrefte at både avkrysset og ikke-avkrysset tilstand ser riktige ut.
5. Kopier den genererte CSS-en inn i stilarket ditt, og bruk den på en <input type="checkbox"> pakket inn på samme måte som markeringen i forhåndsvisningen.

Eksempel

Inndata

Stil: avrundet hake · Størrelse: 24px · Farge: oransje

Resultat

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

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

Selve avkrysningsboksen er skjult visuelt; den synlige boksen er et søsken-<span> som styles ut fra inputens :checked-tilstand, med en liten roterende kant tegnet inn som haken når den er krysset av.

Hvorfor skjule den native avkrysningsboksen i stedet for å fjerne den

Det er fristende å hoppe over selve <input>-elementet og bygge en avkrysningsboks kun av en stylet <div> med en klikk-håndterer, men da mister du gratis tastaturstøtte, skjemainnsending og skjermleser-semantikk. Mønsteret dette verktøyet genererer beholder den ekte checkbox-inputen i markeringen — bare skjult visuelt med opacity: 0 og omplassert — slik at nettleseren fortsatt behandler den som en ekte avkrysningsboks på alle måter som betyr noe, mens et søskenelement tar seg av det synlige utseendet.

De tre stilene i korte trekk

• Avrundet hake: et gjenkjennelig mønster med firkant og hake, mest brukt for skjemafelt, samtykkebokser og lister med flervalg.
• Bryter: oppfattes som en umiddelbar på/av-innstilling snarere enn et skjemafelt — best egnet for preferanser og innstillingsskjermer fremfor avkrysningslister.
• Fylt sirkel: et minimalistisk utseende som ligner en radioknapp, nyttig når en firkantet boks ville føles visuelt tung mot avrundede UI-elementer i nærheten.

Tilpasning til resten av grensesnittet

Den genererte aksentfargen påvirker kun den avkrysnede tilstanden — velg samme farge som merkevaren eller knappene dine bruker, slik at avkrysningsboksen føles konsistent med resten av siden. Kombiner den gjerne med samme border-radius som brukes andre steder i grensesnittet for et mer helhetlig uttrykk.

→ Border Radius-generator · Fargevelger

Ofte stilte spørsmål