Any Side Custom Checkboxes

No one wants to use a standard browsers checkbox, as they are inconsistent or just plain ugly. So like everyone I set up to make my own custom checkbox. I will explain below how to build custom checkbox and why I think it is the best method.

One of the methods that I have seen is you start with your standard checkbox element and your label element in HTML. You can then check the status of the checkbox in CSS by the pseudo class ‘checked’. This means you can put a style only when it is checked and hence the custom checkbox.

<input type="checkbox" id="mycheck" />

<label for="mycheck"> This is my label</label>

Unfortunately if you put a background image on a checkbox then the standard checkbox will appear on top, which doesn’t make for a better looking checkbox. You could at this point make the checkbox very small and invisible, but then for any incompatible browsers , like IE8, the checkbox wouldn’t appear at all. Therefore instead you can use the pseudo class ‘before’ or ‘after’ on the label. You can then put the background image on the pseudo element and move it in front of the current checkbox. This way if it is in the dreaded unsupported browsers, you can still see your checkbox.

The CSS for this would then look like this below. You can see when the checkbox is not checked it has a background colour of red and when it is check then the pseudo class has a background colour of green.

 

.check-box + label:before{

Background-color:red;

Display:block;

Width:20px;

Height:20px;

Margin-left:-20px;

}

.check-box:checked + label:before{

Background-color:green;

}

AMAZING you may say, but this means you need the label on the right and the checkbox on the left. What if you don’t want that? What if you want to be a rebel and have it on the other way round? Well you can can’t with this method as you can’t target your parent elements without some hacks and JavaScript. Do not fear though as there is a way…

Instead of using the label to put the ‘before’ pseudo class on, why not use a standard element like a span. This way the element is not formatted to get in the way of your design and you can put the label/checkbox on either side you wish. If you drop in a span element on the right side of your checkbox, you can even put the background image or colour straight onto the element instead of using the pseudo class, which isn’t supported in all browsers.

However there is now one problem to solve. As your custom checkbox, the span element, is over the top of the checkbox, so you can’t click the checkbox to check it. To get around this you can wrap your whole checkbox and custom span in the label element. This will mean anything inside the label can be check because the label is linked to the checkbox. You can still put your text on either side and even put it in a span as well that you want to target its style.

With the result of this method for custom checkboxes, you can put the text or the checkbox anywhere you want. If the browsers fail the support of the method, then the standard checkbox will be seen so the functionality of the form will not be distorted. Also the new custom checkbox does not get in the way of the functionality as you can still check it.

Check out the example code below or even the full demo on my CodePen.

HTML

<label for="mycheck">

<span>This is my label </span>

<input type="checkbox" id="mycheck" />

<span></span>

</label>

 

CSS

input[type="checkbox"]:checked + span {

width: 20px;

height: 20px;

display: inline-block;

background: red;

margin-left: -20px;

cursor:pointer;

}

input[type="checkbox"] + span {

background: green;

}

 

Advertisements

Leave a message please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s