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