<

Go Premium for a chance to win a PS4. Enter to Win

x

CSS3 Custom Checkboxes

Published on
10,405 Points
4,105 Views
3 Endorsements
Last Modified:

CSS3 Custom checkboxes

This article shows how to style the checkbox form element using only CSS.

Works in: Chrome, FF, Safari, Opera, IE9+
Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and below)

The basic premise is that we will hide the checkbox and style the label - taking advantage of the fact that clicking on the label toggles the checkbox's checked state.

Based on the above principle we can check whether the checkbox is checked and style the label accordingly. To check the state of the checkbox we'll use the :checked pseudo class.

For this tutorial, we'll make a group of checkboxes that allow the user to select days of the week. It will look like this:

checkbox-group in supported browsers
and in unsupported browsers:
checkbox group fallback
Let's start by creating the HTML template:

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CSS3 Custom Checkboxes</title>
<style>
</style>
</head>
<body>
<div class="checkbox-group">
              <ul>
                <li>
                	<input type="checkbox" id="mon"/>
	                <label for="mon">MON</label>
                </li>
                <li>
                	<input type="checkbox" id="tue"/>
	                <label for="tue">TUE</label>
                </li>
                <li>
                	<input type="checkbox" id="wed"/>
	                <label for="wed">WED</label>
                </li>
                <li>
                	<input type="checkbox" id="thur"/>
	                <label for="thur">THUR</label>
                </li>
                <li>
                	<input type="checkbox" id="fri"/>
	                <label for="fri">FRI</label>
                </li>
                <li>
                	<input type="checkbox" id="sat"/>
	                <label for="sat">SAT</label>
                </li>
                <li>
                	<input type="checkbox" id="sun"/>
	                <label for="sun">SUN</label>
                </li>
              </ul>
</div>
</body>
</html>

Open in new window


Each week day is an input type="checkbox" with corresponding label. The id of the input must match the 'for' attribute of its label.

We give the container a class of 'checkbox-group'. We will use this class to qualify the rest of the css rules. This is so we can isolate our custom checkboxes as they pertain to the group. Because at a later date we might want a different style applied to single check boxes, etc..

The first thing is just making sure the list is displayed horizontally:

Copy the following css rules between the <style> tags in the head of your document:

.checkbox-group {
  margin: 20px 0; /* optionally give the whole group some top and bottom margin */
}
.checkbox-group ul {
  display: inline-block;
  *display: inline; /* old IE does not support inline-block */
  margin-bottom: 0;
  margin-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  *zoom: 1; /* give old IE hasLayout*/
 -webkit-padding-start: 0; /* reset default webkit left padding of 40px */
}

.checkbox-group ul > li {
  display: inline; /* display list items horizontally */
}

Open in new window

Next we'll hide the input element:
(for now don't worry about the 'csschecked' class. This has to do with making sure there is a fallback for browsers that do not support the :checked pseudo class, and will be explained later)


.checkbox-group input{
	float:left; /* making sure the checkboxes line up correctly in all browsers */
}
.csschecked .checkbox-group input{
	display:none; /* hide the checkboxes in supported browsers */
}

Open in new window


Now it's time to style the labels. Here the sky's the limit. You can make them look however you like. This code will mimick the above screenshot:

.csschecked .checkbox-group ul > li > label {
	float: left;
	padding: 5px 12px 2px 12px;
	line-height: 20px;
	text-decoration: none;
	background-color: transparent;
	color: #444;
	border: 1px solid #ccc;
	border-left-width: 0;
	font-family:helvetica;
	font-size:12px;
}
.csschecked .checkbox-group ul > li:first-child > label {

  border-left-width: 1px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
}

.csschecked .checkbox-group ul > li:last-child > label {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
}

Open in new window


And here's where the magic happens:
When the checkbox is checked, the label gets a different style, making it appear 'selected':

.csschecked .checkbox-group ul > li > :checked + label{
	background-color: #39C;
	color: white;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.2)));
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
	background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

Open in new window


Now we want to add :hover and :focus states:

.csschecked .checkbox-group ul > li > :checked + :hover, 
.csschecked .checkbox-group ul > li > :checked + label:focus{
	background-color: #39c;
	background-image: none;
}


.csschecked .checkbox-group ul > li > label:hover, 
.csschecked .checkbox-group ul > li > label:focus{
	color:white;
	background-color: #ccc;
	background-image: none;
	cursor: pointer;
}

Open in new window



And that's it!

Well, actually it's not.

If you want to support older browsers gracefully, you'll need a little help from modernizr. We'll use modernizr to detect whether the :checked pseudo class is supported and use the 'csschecked' class to target supported browsers.

If you don't care about backwards support, all you need to do at this point is remove the 'csschecked' from the above CSS.


Add the following into the head of your document above the style element:
Since modernizr doesn't have a check for :checked by default, we've extended it in our own script. (The next version of modernizr which is not out yet has this functionality already in it, so in the future you won't need the extra script)

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script>
Modernizr.addTest('csschecked', function () {
		  return Modernizr.testStyles("#modernizr input {margin-left:0px;} #modernizr input:checked {margin-left: 20px;}", function (elem) {
		    var chx = document.createElement('input');
		    chx.type = "checkbox";
		    chx.checked = "checked";
		    elem.appendChild(chx);
		    return elem.lastChild.offsetLeft >= 20;
		  });
		});
</script>

Open in new window



That's it - for real this time!


Enjoy!

The file in its entirety is attached.
You can also preview it here:
http://candpgeneration.com/toys/css3-custom-checkboxes.php
css3-custom-checkboxes.html
3
Comment
  • 2
3 Comments
 
LVL 25

Author Comment

by:Kyle Hamilton
Thank you ;)

Styling form elements has historically been a developer's nightmare. However, with CSS3 and the latest browsers, it's becoming a lot easier.

Kyle
0
 
LVL 7

Expert Comment

by:Brian Matis
Very slick. Saving this article so I can give it a try sometime. Thanks!
0
 
LVL 25

Author Comment

by:Kyle Hamilton
thanks Brian :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Join & Write a Comment

In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month