CSS Only Checkbox Styling

[Chief 30]

So, I have been on the search for a way to style checkboxes and radio buttons with ONLY CSS. I had yet to find one, and it was getting a bit frustrating. Having to use Jquery UI was just something I didnt want to do. Then, while playing around, I discovered how! It was really quite simple, silly that I hadn't thought of it before. Here is a tutorial on how to do so.

 

My finished product:

 

I will not provide you with the exact styling. I will be leaving that open for you to do, but I will give you the empty classes and all that.

 

So, first thing to do is create the checkbox in your HTML.

<input type="checkbox" />

 

It won't do much as is, so, what you need to do, is give the checkbox a name, so that you can apply a specific label to it.

<input type="checkbox" name="remember_me" />

 

Now, lets do that label

<label for="remember_me"></label>

 

the for="" needs to be the same as the name that you gave your checkbox. This makes it so that the label is directly connected to the checkbox.

 

Now, what we're actually going to be doing, is completely removing the checkbox from the screen, and making our own, using a <p> tag. So, this isn't actually direct styling of the checkbox, but instead more like a replacement.

 

So, inside of your <label>, put a <p>

<label for="remember_me"><p> </p></label>

 

Now for the CSS styling.. This is where it gets fun!

First thing first, hide that ugly checkbox!

input[type="checkbox"]
{
position:absolute;
left:-99999px;
outline:none;
}

 

Setting the position to absolute and giving it such a large negative left positioning will knock it so far off of the screen, you would have to have an extremely massive monitor to see it!

 

But now how do we make our own checkbox? Hmm... oh! Remember how your label is now directly linked to the checkbox? Well, because it is linked, you can now click the label to check and uncheck the box. Cool, huh? So, what we need to do, is style the label for when the box is checked. How do we do that? Like so:

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

}

 

What this does, is tells the browser that when the checkbox is checked, we want this style to show for the label. But you can't really style a label all that well, so what we'll actually be doing is targeting the <p> inside of the label.

input[type="checkbox"]:checked + label p
{

}

 

Now, what I did to my <p> was make it look like a simple white box with rounded corners. However, it's only like that when checked, but I can't see it because the checkbox is gone. So, we need to make a style for the <p> for when the checkbox is unchecked. Simple enough!

input[type="checkbox"] + label p
{

}

 

Now, when you style that one, you should see the <p>. Then, when you click on it, if your styles are different for checked/unchecked, you should notice that you are now checking your own, custom checkbox!

 

Now, the check mark that I used is in a font, so I have the character inside of the <p>, but I needed it to not show up if the box is unchecked... hmm. Well, lets do a similar effect to it as we did to the real checkbox, using text-indent. We need the indent to go back to 0 though, for when the box is checked, so do it like this:

input[type="checkbox"] + label p
{
text-indent:-99999px;
}

input[type="checkbox"]:checked + label p
{
text-indent:0px
}

 

The large negative text indent will knock that as far off the screen as your default checkbox, then setting it to 0 when the box is checked, will bring the text back, so you can see it. Its not a perfect solution, but there are no problems.

 

Now, you can also have a hover effect by replacing :checked with :hover and even a hover effect when the box is checked, by doing this:

input[type="checkbox"]:checked + label:hover p
{

}

 

So, as a recap, what we did was completely remove the default checkbox from the user's view, and replace it with a custom styled <p> that sits inside of the label, which is directly linked to the checkbox! Its such an easy fix. I feel silly for not figuring this out sooner.

 

 

 

HTML:

<input type="checkbox" name="remember_me" />
<label for="remember_me"><p> </p></label>

 

CSS:

input[type="checkbox"]
{
position:absolute;
left:-99999px;
outline:none;
}

input[type="checkbox"] + label p
{
text-indent:-99999px;
}

input[type="checkbox"]:checked + label p
{
text-indent:0px
}

 

 

[Marked 197]

Ahh cool :D I never use radio buttons coz they show up in your $_POST. Can I post this on another of my sites?

[Chief 30]

Can I post this on another of my sites?

 

No, sorry. I am actually going to get this tutorial published onto webdesign tuts plus, and they require that you don't have the tutorial anywhere else. I emailed the web master for it and he said that my tutorial would be a great addition. So, once I get it submitted and up there, I have to remove it here, lol. I will provide a small chunk of it here and then provide the link to read the whole article.

 

But yeah, this technique is amazing. I am so happy I figured it out.

[Marked 197]

Damn, good for you Chief. You should link the demo to your website for some sneaky traffic if it gets through.