Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE=HTML>
<html>
<head>
<title>Scotts Awesome Sauce Checkbox!</title>
<meta name="generator" content="Hugo 0.76.4">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height">
</head>
<body>
<section role="main">
<h1>Pure CSS x-browser checkbox</h1>
<input id="js-selectall-1" class="js-selectall" type="checkbox" value="value1">
<label for="js-selectall-1"></label>
</section>
<style>
/* Checkbox styles Begin */
.prod-sec__fbt .js-selectall {
position: absolute;
border: solid 1px #444;
opacity: 0;
}
.prod-sec__fbt .js-selectall + label {
position: relative;
cursor: pointer;
padding: 0;
}
.prod-sec__fbt .js-selectall + label:before {
content: "";
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: white;
border: solid 1px #444;
}
.prod-sec__fbt .js-selectall:checked + label:before {
background: #30619a;
}
.prod-sec__fbt .js-selectall:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.prod-sec__fbt .js-selectall:checked + label:after {
background: white;
}
.prod-sec__fbt .js-selectall:checked + label:after {
content: "";
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 3px;
height: 3px;
box-shadow: 3px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
/* Checkbox styles End */
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment