Skip to content

Instantly share code, notes, and snippets.

@Fordi

Fordi/checkbox.css

Created June 12, 2012 16:44
Show Gist options
  • Save Fordi/2918638 to your computer and use it in GitHub Desktop.
Save Fordi/2918638 to your computer and use it in GitHub Desktop.
Download ZIP
Cross-browser checkbox styling with graceful fallback (now with less!)
Raw
checkbox.css
/**
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 <[email protected]>
*/
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: "✓"; }
Raw
checkbox.html
<!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>
Raw
checkbox.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
@author Bryan Elliott <[email protected]>
*/
@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: "✓";
}
}
}
Raw
checkobox.js
/** 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