Skip to content

Instantly share code, notes, and snippets.

@cassidoo cassidoo/checkbox

Created May 7, 2015
Embed
What would you like to do?
Style HTML Checkbox
<style>
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;
}
</style>
<input type="checkbox" id="action"><label for="action"></label> hi
@gertig

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.