Pure CSS: Animated CSS3 Checkbox Styling

Are you wondering how to apply styling on a boring input checkbox? In this tutorial, I will create an animated CSS3 checkbox with a styling code example that provides 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 an 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 the first method on a checkbox. However, the process for other checkbox input type is the same and included inside the source code.

Let’s 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 a 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 for Checkbox

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>
</div>

The Checkbox Styling with CSS3

Now let’s start with the fun part of CSS3 styling of a checkbox. 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; }

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

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

The padding-left allows us to give more spaces from the left side of the checkbox so we can give some spaces between the 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;
}

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; }

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 you.

We set 20px to get good size. At this stage, our checkbox is in a normal state.

.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;
}

Now we will do styling the active state of the checkbox. As I explain to 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 the color to transparent to achieve a 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);
}

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 they even fail in the latest version of Firefox.

I hope you like this short tutorial about styling CSS3 animated checkbox and take what you see here and also expand or improve upon it!

You Might Be Interested In: