<!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>
.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 */
}
Next we'll hide the input element:
.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 */
}
.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;
}
.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%);
}
.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;
}
<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>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (3)
Author
Commented:Styling form elements has historically been a developer's nightmare. However, with CSS3 and the latest browsers, it's becoming a lot easier.
Kyle
Commented:
Author
Commented: