Generator toggle switch și checkbox CSS

Exemple de switch-uri și checkbox-uri

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

<label class="toggle">
  <input type="checkbox" role="switch" id="notificari"> Notificări
</label>

<script>
document.getElementById('notificari').addEventListener('change', function (e) {
  console.log(e.target.checked ? 'pornit' : 'oprit');
});
</script>

<label class="toggle">
  <input type="checkbox" role="switch" id="tema"> Temă închisă
</label>

<script>
var tema = document.getElementById('tema');
tema.addEventListener('change', function () {
  document.documentElement.dataset.theme = tema.checked ? 'dark' : 'light';
});
</script>

<fieldset>
  <legend>Cum plătești?</legend>
  <label class="optiune"><input type="radio" name="plata" checked> Lunar</label>
  <label class="optiune"><input type="radio" name="plata"> Anual</label>
</fieldset>

<label class="bifa">
  <input type="checkbox" name="termeni" required> Accept termenii și condițiile
</label>

Cum folosești generatorul de toggle

1. Alege stilul: switch iOS, switch pătrat, checkbox personalizat sau radio personalizat.
2. Scrie textul etichetei și reglează înălțimea, colțurile rotunjite și durata tranziției.
3. Alege culorile: activ (bifat), inactiv / chenar și culoarea butonului, a bifei sau a fundalului.
4. Încearcă în previzualizare controalele reale, cu mouse-ul sau cu Tab și Spațiu, apoi copiază HTML-ul și CSS-ul. Codul se generează în browser; nu se trimite nimic către server.

De ce appearance: none pe input-ul real

Multe tutoriale ascund checkbox-ul și desenează un element fals lângă el. Generatorul stilizează direct <input type="checkbox"> cu appearance: none: controlul rămâne în ordinea de focus, merge cu tastatura, se trimite în formular și este anunțat corect de cititoarele de ecran. Bulina și bifa sunt desenate cu pseudo-elementul ::before al input-ului.

<label class="toggle">
  <input type="checkbox" role="switch" checked> Notificări prin e-mail
</label>

role="switch" spune cititoarelor de ecran că este un comutator pornit/oprit, nu o bifă. Eticheta <label> care cuprinde input-ul face ca și clicul pe text să schimbe starea.

Stările pe care nu trebuie să le uiți

:checked schimbă culoarea și mută bulina, :focus-visible desenează un contur doar când ajungi la control cu tastatura, iar :disabled îl estompează. Tranziția se oprește pentru cei care au cerut mai puțină mișcare din sistem (prefers-reduced-motion).

Întrebări frecvente

Merge ::before pe un input?

Pe un input cu appearance: none, da, în Chrome, Edge, Firefox și Safari actuale. Fără appearance: none, pseudo-elementele pe input nu sunt garantate.

Cum citesc starea în JavaScript?

La fel ca la orice checkbox: input.checked și evenimentul change.