Skip to content

Instantly share code, notes, and snippets.

@cassidoo cassidoo/checkbox

Created May 7, 2015
What would you like to do?
Style HTML Checkbox
input[type=checkbox] {
display: none;
input[type=checkbox] + label {
display: inline-block;
position: relative;
padding: 6px;
background-color: white;
border: 1px solid lightgray; /* border of the checkbox */
border-radius: 3px
input[type=checkbox]:checked + label {
background-color: blue; /* whatever you want the background color of the box to be */
color: white;
input[type=checkbox]:checked + label:after {
position: absolute;
left: 2px;
top: 0px;
color: white; /* Color of the checkmark */
content: '\2714'; /* This is a "heavy" checkmark. Change to 2713 for a light one. */
font-size: 10px;
<input type="checkbox" id="action"><label for="action"></label> hi

This comment has been minimized.

Copy link

gertig commented May 8, 2015

Awesome, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.