Custom Checkbox And Radio Inputs In Pure CSS

Category: CSS & CSS3 , Form | October 26, 2017
Author: crazychicken
Views Total: 4,547
Official Page: Go to website
Last Update: October 26, 2017
License: MIT


Custom Checkbox And Radio Inputs In Pure CSS


A collection of CSS styles to customize the checkboxes and radio buttons with your own styles, images, and CSS sprites.

How to use it:

Install it via NPM:

$ npm install checkbox-radio --save

Or include the style sheet directly:

  • checkbox_radio.css: default theme
  • checkbox_radio_bootstrap.css: Bootstrap style
  • checkbox_radio_font.css: using a custom iconic font
  • checkbox_radio_img_sprite.css: using a CSS sprite
<link rel="stylesheet" href="css/checkbox_radio.css">
<link rel="stylesheet" href="css/checkbox_radio_bootstrap.css">
<link rel="stylesheet" href="css/checkbox_radio_font.css">
<link rel="stylesheet" href="css/checkbox_radio_img_sprite.css">

Insert checkboxes and radio buttons into the page as follows:

<label class="checkbox">
  <input type="checkbox">
  <i class="icon-checkbox"></i>

<label class="radio">
  <input type="radio" name="group-radio" checked>
  <i class="icon-radio"></i>

You Might Be Interested In:

Leave a Reply