Pure CSS Switches For Checkbox and Radio Inputs

Preview:

Description:

A pure CSS solution that transform regular checkboxes or radio inputs into toggle switches.

How to use it:

Load the required stylesheet file in the head section of your document.

<link rel="stylesheet" href="rb-switcher.min.css">

Create a group of toggle switches from checkboxes and input labels.

<fieldset>
  <legend>What's your favorite pet?</legend>
  <div>
    <label for="dog">
      Dog
    </label>
    <label class="rb-switcher">
      <input type="checkbox" name="animal" id="dog" value="dog" />
      <i></i>
    </label>
  </div>
  <div>
    <label for="cat">
      Cat
    </label>
    <label class="rb-switcher">
      <input type="checkbox" name="animal" id="cat" value="cat" />
      <i></i>
    </label>
  </div>
  <div>
    <label for="bird">
      Bird
    </label>
    <label class="rb-switcher">
      <input type="checkbox" name="animal" id="bird" value="bird" />
      <i></i>
    </label>
  </div>
</fieldset>

Create a group of toggle switches from radio buttons and input labels.

<fieldset>
  <legend>Male</legend>
  <label class="rb-switcher">
    <input type="radio" name="sex" value="male" checked>
    <i></i>
  </label>
</fieldset>
<fieldset>
  <legend>Female</legend>
  <label class="rb-switcher red">
    <input type="radio" name="sex" value="female">
    <i></i>
  </label>
</fieldset>