Skip to content

Instantly share code, notes, and snippets.

@neodigm

neodigm/pure_css_checkbox.html

Created January 23, 2021 18:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neodigm/058e598ff15602a9b2b588298bafcd6e to your computer and use it in GitHub Desktop.
Save neodigm/058e598ff15602a9b2b588298bafcd6e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pure_css_checkbox.html
<!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