Dynamic Drive CSS Library- CSS3 checkbox and radio button replacements

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Form CSS: CSS3 demos: Here

CSS3 checkbox and radio button replacements

Author: Dynamic Drive

By hiding the default INPUT element of a checkbox/ radio button and styling its associated LABEL element instead, checkboxes and radio buttons can take on an entirely new look while maintaining their functionality inside a form. The following demonstrates just that. The custom checkbox and radio buttons you see are actually label elements richly styled with the help of CSS2 ::before and ::after generated content and the usual dose of CSS3 transition, shadows etc. When the form is submitted, each selected checkbox or radio value will be passed along like with their regular counterparts.

Demo:

This is checkbox 1 This is checkbox 2 This is radio 1 This is radio 2 This is radio 3

The CSS:

<style>

@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

/* #### checkbox buttons #### */

input[type="checkbox"].css3checkbox{
  display: none;
}

label.toggler{ /* checkbox label */
  display: block;
  position: relative;
  padding-left: 32px; /* space to the left of label text */
  padding-top: 2px;
  margin-bottom: 1em; /* bottom spacing */
  cursor: pointer;
}

label.toggler::before{ /* flat box */
  content: '';
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #B1E5EF;
  box-shadow: 0 0 3px #BFDEFC inset;
  left: 0;
  top: 0;
}

label.toggler::after{ /* check mark inside flat box*/
  content: '\f00c'; /* fontAwesome icon font unicode. See http://fortawesome.github.io/Font-Awesome/cheatsheet/ for others */
  position:absolute;
  left: 3px;
  top: 3px;
  font: bold 18px FontAwesome;
  color: #1B4977;
  width: 0; /* hide check mark initially */
  text-shadow: 0 0 2px #eee;
  overflow: hidden;
}

input[type="checkbox"]:checked + label.toggler::after{ /* check mark when checkbox is checked */
  transition: width 0.2s; /* CSS3 transition on width property */
  width: 25px; /* expand check mark to show it. Value should reflect that of container box */
}

/* #### radio buttons #### */

input[type="radio"].css3radio{
  display: none;
}

label.toggler_r{ /* radio label */
  display: block;
  position: relative;
  padding-left: 32px; /* space to the left of label text */
  padding-top: 2px;
  margin-bottom: 1em; /* bottom spacing */
  cursor: pointer;
}

label.toggler_r::before{ /* outer round circle */
  content: '';
  display: block;
  position:absolute;
  width: 25px;
  height: 25px;
  background: #B1E5EF;
  box-shadow: 0 0 3px #BFDEFC inset;
  border-radius: 25px;
  left: 0;
  top: 0;
}

label.toggler_r::after{ /* inner dark circle */
  content: '';
  position:absolute;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  left: 5px;
  top: 5px;
  overflow: hidden;
  transition: all 0.2s;  /* CSS3 transition on dark circle */
}

input[type="radio"]:checked + label.toggler_r::after{ /* inner dark circle when radio is selected */
  background: #1B4977;
  box-shadow: 1px 1px 5px white;
}

</style>

Note: The check mark seen inside the checkbox replacement is a CSS icon font from Font Awesome. We specify the unicode of the desired font symbol inside our CSS to show it, in this case, a check mark:

label.toggler::after{ /* check mark */
content: '\f00c'; /* fontAwesome icon font unicode. See http://fortawesome.github.io/Font-Awesome/cheatsheet/ for others */
position:absolute;
left: 3px;
top: 3px;
font: bold 18px FontAwesome;
color: #1B4977;
width: 0; /* hide check mark initially */
text-shadow: 0 0 2px #eee;
overflow: hidden;
}

Click here to see the full list of Font Awesome's font unicode values.

The HTML:

<input type="checkbox" id="checkbox1" class="css3checkbox" />
<label class="toggler" for="checkbox1">This is checkbox 1</label>

<input type="checkbox" id="checkbox2" class="css3checkbox" />
<label class="toggler" for="checkbox2">This is checkbox 2</label>

<input type="radio" id="radio1" name="myradios" class="css3radio" />
<label class="toggler_r" for="radio1">This is radio 1</label>

<input type="radio" id="radio2" name="myradios" class="css3radio" />
<label class="toggler_r" for="radio2">This is radio 2</label>

<input type="radio" id="radio3" name="myradios" class="css3radio" />
<label class="toggler_r" for="radio3">This is radio 3</label>

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here