Pretty Custom Checkboxes & Radio Buttons with Pure CSS – CSS3 Checkbox

A CSS library which helps you create easy-to-customizable checkboxes and radio buttons to make your form more pretty.

How to use it:

Place the checkbox.css in the head section of the html page.

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

Create a custom radio button.

<div class="radio-btn">
  <input type="radio" value="value-1" id="rc1" name="rc1" checked="checked">
  <label for="rc1" onclick>Radio button</label>
</div>

Create custom checkboxes.

<div class="checkbox-btn">
  <input type="checkbox" value="value-1" id="rc2" name="rc2">
  <label for="rc2" onclick>Checkbox</label>
</div>