CSS/CSS3 Only Custom Checkboxes, Radios And Switches – el-checkbox

Preview:

Description:

el-checkbox is a pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.

Features:

• 4 themes: default, red, green, and yellow.
• 3 sizes: default, small, and large.

How to use it:

Just insert the checkbox.css in the document and you’re ready to go.

<link rel="stylesheet" href="./dist/checkbox.css">

Beautify the default checkbox and radio inputs.

<div class="el-checkbox">
  <span class="margin-r">Unchecked</span>
  <input type="checkbox" name="check" id="1_1">
  <label class="el-checkbox-style" for="1_1"></label>
</div>
<div class="el-checkbox">
  <span class="margin-r">Checked</span>
  <input type="checkbox" name="check" id="1_2" checked>
  <label class="el-checkbox-style" for="1_2"></label>
</div>
<div class="el-radio">
  <span class="margin-r">Unchecked</span>
  <input type="radio" name="radio1" id="2_1" value="option" checked>
  <label class="el-radio-style" for="2_1"></label>
</div>
<div class="el-radio">
  <span class="margin-r">Checked</span>
  <input type="radio" name="radio1" id="2_2" value="option" checked>
  <label class="el-radio-style" for="2_2"></label>
</div>

To create an iOS-style toggle switch.

<label class="el-switch">
  <input type="checkbox" name="switch">
  <span class="el-switch-style"></span>
</label>

Set the size.

<label class="el-checkbox el-checkbox-sm">
  <span class="margin-r">small checkbox</span>
  <input type="checkbox" name="check" checked>
  <span class="el-checkbox-style  pull-right"></span>
</label>
<label class="el-checkbox el-checkbox-lg">
  <span class="margin-r">large checkbox</span>
  <input type="checkbox" name="check" checked>
  <span class="el-checkbox-style  pull-right"></span>
</label>

Change the default themes.

<div class="el-checkbox el-checkbox-green">
  <span class="margin-r">Unchecked</span>
  <input type="checkbox" name="check" id="2_1">
  <label class="el-checkbox-style" for="2_1"></label>
</div>
<div class="el-checkbox el-checkbox-red">
  <span class="margin-r">Unchecked</span>
  <input type="checkbox" name="check" id="3_1">
  <label class="el-checkbox-style" for="3_1"></label>
</div>
<div class="el-checkbox el-checkbox-yellow">
  <span class="margin-r">Unchecked</span>
  <input type="checkbox" name="check" id="4_1">
  <label class="el-checkbox-style" for="4_1"></label>
</div>