Pure CSS: Animated CSS3 Checkbox Styling

Are you wondered how to apply styling on boring input checkbox? In this tutorial, I will create animated pure CSS checkboxes which provide animation when they checked.

Usually, the form elements are the most interesting and inaccessible components of the website. That is specifically due to the complexities that include styling form elements, and overriding browser defaults.

With a touch extra markup, our form elements can be styled in awesome way, and be as reachable.

We have three different examples of checkbox styling. The styling of checkboxes have become viable with the advent of the :checked and :before pseudo-element in CSS3.

With the help of  :checked pseudo-element selector, we’re capable of targeting an element based totally on its checked (or unchecked) status.

We can then use the “+” adjoining sibling selector from CSS2.1 to target the element at once following the checkbox, which in our case is the label.

How to Style Checkbox with CSS3 Animated

I’m able only to show you first method on a checkbox. However, the process for other checkbox input type is the same and included inside the source code.

Lets start by creating our checkbox input type followed through a label.

<input type="checkbox">
<label>Pellentesque sit amet quam</label>

Now, simply in case you do not know an lot about the label, you need to join the input and the label so as a way to interact with the entrance via the label.

That is executed with the aid of the use of for=”” and the input’s identity (ID).

<input type="checkbox" id="box-1">
<label for="box-1">Pellentesque sit amet quam</label>

The Complete HTML Markup

Here is the complete set of HTML code which you can also find in the demo and download source.

We have placed a div class name checkboxes and place the checkboxes inside it. If you want to style more than one checkbox than you need to make sure that each input type checkbox and label element should have a unique ID

<div class="chickyboxes">
<input type="checkbox" id="box-1">
<label for="box-1">Pellentesque sit amet quam</label>

<input type="checkbox" id="box-2" checked>
<label for="box-2">Morbi faucibus interdum magna vel</label>

<input type="checkbox" id="box-3">
<label for="box-3">Donec ultrices diam sed</label>

The Checkbox Styling with CSS3

Now let’s start with fun part of CSS3 styling of a check box. First of all, we need to do the very basic thing and we do just hide the default checkbox.

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

1. Styling Label Element

Now We can go a head and style the label element. We will use “+” adjoining sibling selector with input type checkbox.

We will set the label position to relative and display it as the block. There are few other general styles, we need to do like font and color etc.

The padding-left to allow us to give more spaces from a left side of the checkbox so we can give some spaces between checkbox itself and label text.

The margin-bottom is generally for space between two checkboxes.

.chickyboxes input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

2. Removing Bottom Space

We don’t need any bottom space for the last checkbox so we will use :last-child pseudo-element and make margin-bottom zero.

.chickyboxes input[type="checkbox"] + label:last-child { margin-bottom: 0; }

3. Do Something Nice

Okay, Let’s do something nice with the label and we will use :before the element with the label.

We here style our checkbox by adding some border and do add the transition. The width and height depend on upon you.

We set 20px to get good size. At this stage, our checkbox is at normal states.

.chickyboxes input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;

4. Checkbox Active State

Now we will do styling the active state of the checkbox. As I explain you above, we will use checked CSS3 pseudo-element with “+” adjoining sibling selector for the label.

The label itself also used the :before element. What we do here is to change the style of the checkbox when it checked and we used the transform CSS3 property to rotate it at 45deg.

We also make the border top and left color to transparent to achieve the unique style.

.chickyboxes input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

Final Words

Now you can get implement on your web or do customizing as you want. The technique and process will stay remain, but you can easily change the color, font, size and animation.

I try to cover the best possible method which has good browser support. There are few other ways to style the checkboxes but the even fail in the latest version of Firefox.

I hope you like this short tutorial and take what you see here and also expand or improve upon it!

You May Also Like

Leave a Comment