Build Animated CSS3 Checkbox Styling without Javascript

CSS3 Checkbox Styling

Are you wondered how to design checkboxes into something animated style, but without Javascript? With CSS3 we can do it and customize it as we want. In this CSS3 tutorial, as the title says, we are going to build animated CSS3 checkbox styling and changed the look of the checkbox.

The Checkboxes are brilliant. Integrate them with the proper CSS3, and you could pull off a few virtually neat hints. This post aims to show off a some of the creative things you could do with checkboxes. We will guide you how to style the checkbox and animated it while clicking. 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 nearly, and be as reachable as we select to make them – no JavaScript required. The following tutorial supposed for novices; In case you want to get immediately to the point, head to the demo and download source code.

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

What precisely can we be doing? Well, because of CSS3’s nifty little :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.

CSS3 Checkbox Styling Markup

Now, we start out with the aid of creating our HTML and CSS and get to work. I will expect you recognize the way to try this, so we may not need to get into it. For the motive of getting you to your manner, I’m able only to show you first method on a checkbox. However, the process for other checkbox input type is same and included inside the source code.

Ok, let’s simply begin then, lets? We 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 awful lot about the label, you need to join the input and the label so as a way to interact with the enter 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>

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

CSS3 Checkbox Styling

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

Now that’s it, 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;
}

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, so let’s do something nice with the label (which is usually is checkbox now) 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;
}

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

Alright, so what next? Nothing to do anything else, we are done with it. 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 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

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *