Generator CSS checkboxa

Što je ovaj alat?

Zadani checkboxovi preglednika izgledaju različito u svakom pregledniku i teško ih je izravno restilizirati, jer njihov ugrađeni izgled crta operacijski sustav, ne obični CSS. Standardno rješenje je vizualno sakriti izvorni checkbox i stilizirati susjedni element umjesto njega, vođen stanjem :checked checkboxa — input ostaje potpuno funkcionalan i pristupačan, mijenja se samo izgled.

Ovaj alat gradi taj obrazac za tri uobičajena stila checkboxa: zaobljena kutija s animiranom kvačicom, prekidač u stilu iOS-a, i stil ispunjenog kruga (nalik radio gumbu). Kliknite checkbox u pregledu da vidite označeno stanje, prilagodite veličinu i naglašenu boju, zatim kopirajte CSS.

Izvor: Selectors Level 4, W3C — specifikacija koja definira pseudo-klasu :checked na kojoj se temelji ova tehnika.

Zašto ga koristiti?

• Prikaz uživo, klikabilan — uključite checkbox da vidite točno kako izgledaju označeno i neoznačeno stanje.
• Tri različita, uobičajeno korištena stila u jednom alatu: kutija s kvačicom, toggle prekidač i ispunjeni krug.
• Osnovni element ostaje pravi <input type="checkbox">, pa tipkovnička navigacija, slanje obrasca i čitači zaslona i dalje rade normalno.
• Prilagodljiva veličina i naglašena boja, generirane izravno u CSS vrijednosti umjesto ostavljene kao varijable za popunjavanje.
• Nije potreban ikonski font, SVG datoteka niti slika — kvačica i klizač crtaju se običnim CSS obrubima i pseudo-elementima.
• Besplatno, izvodi se u vašem pregledniku, bez prijave.

Kako ga koristiti

1. Odaberite stil: zaobljena kvačica, toggle prekidač ili ispunjeni krug.
2. Povucite klizač veličine kako biste povećali ili smanjili checkbox.
3. Odaberite naglašenu boju — ona postaje boja pozadine i obruba u označenom stanju.
4. Kliknite checkbox u panelu pregleda kako biste potvrdili da i označeno i neoznačeno stanje izgledaju dobro.
5. Kopirajte generirani CSS u svoj stylesheet i koristite ga na bilo kojem <input type="checkbox"> omotanom na isti način kao markup u pregledu.

Primjer

Ulaz

Stil: zaobljena kvačica · Veličina: 24px · Boja: narančasta

Izlaz

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

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

Input checkboxa vizualno je skriven; vidljiva kutija je susjedni <span> stiliziran stanjem :checked inputa, s malim zarotiranim obrubom nacrtanim kao kvačica kad je označeno.

Zašto sakriti izvorni checkbox umjesto ukloniti ga

Primamljivo je preskočiti pravi <input> i izgraditi checkbox isključivo od stiliziranog <div>-a s click handlerom, ali time se besplatno gubi podrška za tipkovnicu, slanje obrasca i semantika za čitače zaslona. Obrazac koji ovaj alat generira zadržava pravi checkbox input u markupu — samo vizualno skriven pomoću opacity: 0 i repozicioniran — tako da ga preglednik i dalje tretira kao pravi checkbox u svakom bitnom smislu, dok susjedni element preuzima vidljivo stiliziranje.

Tri stila na prvi pogled

• Zaobljena kvačica: poznat obrazac kvadrata s kvačicom, najčešći za polja obrazaca, checkboxove za slaganje s uvjetima i liste s višestrukim odabirom.
• Toggle prekidač: djeluje kao trenutna postavka uklj/isklj, a ne polje obrasca — najbolji za zaslone postavki i preferencija, a ne za popise checkboxova.
• Ispunjeni krug: minimalan izgled nalik radio gumbu, koristan kad bi kvadratna kutija vizualno djelovala teško uz obližnje zaobljene UI elemente.

Usklađivanje s ostatkom vašeg UI-ja

Generirana naglašena boja utječe samo na označeno stanje — odaberite boju marke ili gumba kako bi checkbox djelovao dosljedno s ostatkom stranice. Uparite ga s istim border-radiusom korištenim drugdje u sučelju za skladniji izgled.

→ Generator border-radius · Birač boje

Često postavljana pitanja