Cross-browser checkbox styling with graceful fallback (now with less!)
/** | |
Usage (the label is required) | |
<input id="uid" type="checkbox" ... /><label for="uid">Label</label> | |
Produces styled checkboxes in IE9+, current Firefox and Chrome | |
Demo here: http://jsfiddle.net/7Fggq/ | |
@author Bryan Elliott <ook@codemonkeybryan.com> | |
*/ | |
body.styled-checkboxes input[type=checkbox]:nth-child(1n) { | |
/** Hides the original checkbox in IE9+, FF3.5+, WK, to enable partially transparent checkboxes */ | |
visibility: hidden; | |
} | |
/* Sizing / positioning for real checkbox */ | |
body.styled-checkboxes input[type=checkbox] { | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
margin: 0; | |
padding: 0; | |
top: 0.2em; | |
} | |
/** Allows absolute positioning for virtual elements */ | |
body.styled-checkboxes input[type=checkbox] + label { | |
position: relative; | |
} | |
/* Basics for the virtual checkbox */ | |
body.styled-checkboxes input[type=checkbox] + label::before, | |
body.styled-checkboxes input[type=checkbox] + label::after { | |
display: block; | |
position: absolute; | |
content: " "; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
} | |
/* outer borders */ | |
body.styled-checkboxes input[type=checkbox] + label::before { | |
top: 0.1em; | |
left: -1.25em; | |
width: 1em; | |
height: 1em; | |
border: 1px solid #8d8f8c; | |
background-color: #f2f4f1; | |
} | |
/** Inner border, gradient, and checkmark */ | |
body.styled-checkboxes input[type=checkbox] + label::after { | |
top: 0.225em; | |
left: -1.125em; | |
width: 0.75em; | |
height: 0.75em; | |
border: 1px solid green; | |
font-family: "Arial Unicode MS"; | |
font-size: 1em; | |
line-height: 0.5em; | |
border-color: #b9bec1 #c2c7c9 #d0d5d7 #abb3bb; | |
box-shadow: inset 2px 2px 6px 0 #cbd0d3; | |
background-color: #f2f4f1; | |
color: #4a5f97; | |
} | |
/** Hover state, outer borders */ | |
body.styled-checkboxes input[type=checkbox] + label:hover::before { | |
border-color: #5586a3; | |
background-color: #def9fa; | |
} | |
/** Hover state, inner border and checkmark */ | |
body.styled-checkboxes input[type=checkbox] + label:hover::after { | |
border-color: #79c6f9 #a5d9fa #d2edfd #7ecaf9; | |
box-shadow: inset 2px 2px 6px 0 #b1dffd; | |
background-color: #e7f7fe; | |
color: #8090FF; | |
} | |
/**Active (mouse-down) state, outer borders */ | |
body.styled-checkboxes input[type=checkbox] + label:active::before { | |
border-color: #2c628b; | |
background-color: #c2e4f6; | |
} | |
/** Active state, inner border and checkmark */ | |
body.styled-checkboxes input[type=checkbox] + label:active::after { | |
border-color: #5eb6f7 #66bcf7 #c7e9fc #64bbf7; | |
box-shadow: inset 2px 2px 6px 0 #9dd5fc; | |
background-color: #e0f4fe; | |
color: #0000FF; | |
} | |
/** Checkmark character */ | |
body.styled-checkboxes input[type=checkbox][checked] + label::after { content: "✓"; } |
<!DOCTYPE HTML> | |
<html lang="en-US"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Checkbox demo</title> | |
<link rel="stylesheet" type="text/css" href="checkbox.css" /> | |
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> | |
<script src="checkbox.js"></script> | |
</head> | |
<body> | |
<input id="12345" type="checkbox" /> | |
<label for="12345">Checkbox Label</label> | |
</body> | |
</html> |
/** | |
Usage (the label is required) | |
<input id="uid" type="checkbox" ... /><label for="uid">Label</label> | |
Produces styled checkboxes in IE9+, current Firefox and Chrome | |
@author Bryan Elliott <ook@codemonkeybryan.com> | |
*/ | |
@checkbox-default-border: #8d8f8c; | |
@checkbox-default-background: #f2f4f1; | |
@checkbox-default-check: #4a5f97; | |
@checkbox-hover-border: #5586a3; | |
@checkbox-hover-background: #def9fa; | |
@checkbox-hover-check: #8090FF; | |
@checkbox-active-border: #2c628b; | |
@checkbox-active-background: #c2e4f6; | |
@checkbox-active-check: #0000FF; | |
.check-inner(@border, @background) { | |
border-top-color: @border * 0.55 + @background * 0.45; | |
border-right-color: @border * 0.45 + @background * 0.55; | |
border-bottom-color: @border * 0.35 + @background * 0.65; | |
border-left-color: @border * 0.65 + @background * 0.35; | |
box-shadow: inset 2px 2px 6px 0 (@border * 0.45 + @background * 0.55); | |
background-color: @background; | |
} | |
body.styled-checkboxes { | |
input[type=checkbox] { | |
/* Sizing / positioning for real checkbox */ | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
margin: 0; | |
padding: 0; | |
top: 0.2em; | |
&:nth-child(1n) { | |
/** Hides the original checkbox in IE9+, FF3.5+, WK, to enable partially transparent checkboxes */ | |
visibility: hidden; | |
} | |
/** Allows absolute positioning for virtual elements */ | |
&+label { | |
position: relative; | |
/* Basics for the virtual checkbox */ | |
&::before, | |
&::after { | |
display: block; | |
position: absolute; | |
content: " "; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
} | |
/* outer borders */ | |
&::before { | |
top: 0.1em; | |
left: -1.25em; | |
width: 1em; | |
height: 1em; | |
border: 1px solid @checkbox-default-border; | |
background-color: @checkbox-default-background; | |
} | |
/** Inner border, gradient, and checkmark */ | |
&::after { | |
top: 0.225em; | |
left: -1.125em; | |
width: 0.75em; | |
height: 0.75em; | |
border: 1px solid green; | |
font-family: "Arial Unicode MS"; | |
font-size: 1em; | |
line-height: 0.5em; | |
.check-inner(@checkbox-default-border, @checkbox-default-background); | |
color: @checkbox-default-check; | |
} | |
/** Hover state, outer borders */ | |
&:hover::before { | |
border-color: @checkbox-hover-border; | |
background-color: @checkbox-hover-background; | |
} | |
/** Hover state, inner border and checkmark */ | |
&:hover::after { | |
.check-inner(@checkbox-hover-border, @checkbox-hover-background); | |
color: @checkbox-hover-check; | |
} | |
/**Active (mouse-down) state, outer borders */ | |
&:active::before { | |
border-color: @checkbox-active-border; | |
background-color: @checkbox-active-background; | |
} | |
/** Active state, inner border and checkmark */ | |
&:active::after { | |
.check-inner(@checkbox-active-border, @checkbox-active-background); | |
color: @checkbox-active-check; | |
} | |
} | |
/** Checkmark character */ | |
&[checked] + label::after { | |
content: "✓"; | |
} | |
} | |
} |
/** Requires jQuery */ | |
$(function () { | |
/** enables the stylesheet. If javascript is disabled, normal checkboxes are used */ | |
$(document.body).addClass("styled-checkboxes"); | |
}); | |
$(document).on('change', 'input[type=checkbox]', function (e) { | |
/** Catches the "checked" attribute up with the state of the checkbox */ | |
$(this).attr('checked', $(this).prop('checked')); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment