Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SVG based checkbox
.checkbox {
height: 40px;
width: 40px;
outline: none;
cursor: default;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.checkbox:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="5"/></svg>')
}
.checkbox:checked:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="5"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>')
}
@ryantbrown

This comment has been minimized.

Copy link
Owner Author

@ryantbrown ryantbrown commented Apr 10, 2016

<input type="checkbox" class="checkbox">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment