Skip to content

Instantly share code, notes, and snippets.

@dennis-tra
Last active August 15, 2016 09:32
Show Gist options
  • Save dennis-tra/77956827615733e1956c3cb2a1bf4dd3 to your computer and use it in GitHub Desktop.
Save dennis-tra/77956827615733e1956c3cb2a1bf4dd3 to your computer and use it in GitHub Desktop.
CSS of a HTML checkbox
// <input type="checkbox" id="1"><label for="1"></label>
$checkbox-color: white;
$checkbox-color-checked: green;
input[type="checkbox"] {
display: none;
& + label:before {
background: $checkbox-color;
content: "\00a0";
display: inline-block;
font: 20px/1em sans-serif;
height: 25px;
width: 25px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
}
& + label:hover:before {
background: darken($checkbox-color, 10%);
}
& + label:active:before {
background: darken($checkbox-color, 20%);
}
&:checked + label:hover:before {
background: darken($checkbox-color-checked, 5%);
}
&:checked + label:active:before {
background: darken($checkbox-color-checked, 10%);
}
&:checked + label:before {
background: $checkbox-color-checked;
color: $checkbox-color;
content: '\2713';
text-align: center;
line-height: 26px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment