Jan. 2021

Toggle Switch with `<input type="checkbox">`

Exemples de customisation des <input type="checkbox">.

Exemple #1

Rendu

Code

HTML

<div class="switch1">
  <input type="checkbox" id="check1">
  <label for="check1" data-off="Off" data-on="On"></label>
</div>

CSS

Exemple #2

Rendu

On Off

Code

HTML

<div class="switch2">
  <input type="checkbox" id="check2">
  <label for="check2" class="on">On</label>
  <label class="track"></label>
  <label for="check2" class="off">Off</label>
</div>

CSS