Generator de checkbox CSS

Ce este acest instrument?

Checkbox-urile implicite ale browserului arată diferit în fiecare browser și sunt greu de restilizat direct, deoarece aspectul lor implicit este desenat de sistemul de operare, nu de CSS simplu. Soluția standard este să ascunzi vizual checkbox-ul nativ și să stilizezi în schimb un element frate, dictat de starea :checked a checkbox-ului — input-ul rămâne complet funcțional și accesibil, doar aspectul se schimbă.

Acest instrument construiește acel model pentru trei stiluri comune de checkbox: o casetă rotunjită cu o bifă animată, un comutator glisant în stil iOS și un stil de cerc plin (asemănător unui radio button). Apasă checkbox-ul din previzualizare pentru a vedea starea bifată, ajustează dimensiunea și culoarea de accent, apoi copiază CSS-ul.

Sursă: Selectors Level 4, W3C — specificația care definește pseudo-clasa :checked pe care se bazează această tehnică.

De ce să-l folosești?

• Previzualizare live, clicabilă — comută checkbox-ul pentru a vedea exact cum arată stările bifat și nebifat.
• Trei stiluri distincte, folosite frecvent, într-un singur instrument: casetă cu bifă, comutator toggle și cerc plin.
• Elementul de bază rămâne un <input type="checkbox"> real, deci navigarea cu tastatura, trimiterea formularelor și cititoarele de ecran continuă să funcționeze normal.
• Dimensiune și culoare de accent ajustabile, generate direct în valorile CSS, nu lăsate ca variabile de completat.
• Nu este necesar niciun font de iconițe, fișier SVG sau imagine — bifa și butonul sunt desenate cu margini CSS simple și pseudo-elemente.
• Gratuit, rulează în browserul tău, fără înregistrare.

Cum se folosește

1. Alege un stil: bifă rotunjită, comutator toggle sau cerc plin.
2. Trage sliderul de dimensiune pentru a scala checkbox-ul în sus sau în jos.
3. Alege o culoare de accent — aceasta devine culoarea de fundal și de margine a stării bifate.
4. Apasă checkbox-ul din panoul de previzualizare pentru a confirma că ambele stări, bifat și nebifat, arată corect.
5. Copiază CSS-ul generat în foaia ta de stiluri și folosește-l pe orice <input type="checkbox"> înfășurat la fel ca marcajul din previzualizare.

Exemplu

Intrare

Stil: bifă rotunjită · Dimensiune: 24px · Culoare: portocaliu

Rezultat

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

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

Input-ul checkbox este ascuns vizual; caseta vizibilă este un <span> frate stilizat cu starea :checked a input-ului, cu o mică margine rotită desenată ca bifă odată bifat.

De ce să ascunzi checkbox-ul nativ în loc să-l elimini

Este tentant să sari peste <input>-ul real și să construiești un checkbox pur dintr-un <div> stilizat cu un handler de clic, dar asta pierde gratuit suportul pentru tastatură, trimiterea formularelor și semantica pentru cititoare de ecran. Modelul pe care îl generează acest instrument păstrează input-ul real de checkbox în marcaj — doar ascuns vizual cu opacity: 0 și repoziționat — astfel încât browserul îl tratează în continuare ca pe un checkbox autentic în orice fel care contează, în timp ce un element frate se ocupă de stilizarea vizibilă.

Cele trei stiluri, pe scurt

• Bifă rotunjită: un model familiar pătrat-cu-bifă, cel mai comun pentru câmpuri de formular, checkbox-uri de acord și liste cu selecție multiplă.
• Comutator toggle: se citește ca o setare instant on/off, nu ca un câmp de formular — cel mai bun pentru ecrane de preferințe și setări, nu pentru liste de checkbox-uri.
• Cerc plin: un aspect minimal, asemănător unui radio button, util când o casetă pătrată ar părea vizual grea lângă elemente de interfață rotunjite din apropiere.

Potrivirea cu restul interfeței tale

Culoarea de accent generată afectează doar starea bifată — alege orice culoare de brand sau de buton ai, astfel încât checkbox-ul să se simtă consistent cu restul paginii. Combină-l cu același border-radius folosit în altă parte a interfeței pentru un aspect mai coerent.

→ Generator Border Radius · Selector de culoare

Întrebări frecvente