inpox - custom checkbox and radio

Pure CSS (no javascript required)

Default checkbox state

<label class="inpox inpox-cb">
 <input type="checkbox">
 <span class="inpox-label">...</span>
</label>

Checkbox checked state

<label class="inpox inpox-cb">
 <input type="checkbox" checked>
 <span class="inpox-label">...</span>
</label>

Default radio state

<label class="inpox inpox-rb">
 <input type="radio">
 <span class="inpox-label">...</span>
</label>

Checked radio state

<label class="inpox inpox-rb">
 <input type="radio" checked>
 <span class="inpox-label">...</span>
</label>

Radio group

<label class="inpox inpox-rb">
 <input type="radio" name="group-name">
 <span class="inpox-label">...</span>
</label>
<label class="inpox inpox-rb">
 <input type="radio" name="group-name">
 <span class="inpox-label">...</span>
</label>

Switcher

<label class="inpox switcher">
 <input type="checkbox">
 <span class="inpox-label">...</span>
</label>

Checked switcher stated

<label class="inpox switcher">
 <input type="checkbox" checked>
 <span class="inpox-label">...</span>
</label>

Getting started

git clone https://github.com/elmahdim/inpox.git

or Download ZIP

Usage

<link rel="stylesheet" href="path-to/inpox.css">

This project is maintained by elmahdim
Hosted on GitHub Pages

inpox - custom checkbox & radio

Getting started

Usage