Skip to content

Instantly share code, notes, and snippets.

@mojoaxel

mojoaxel/_checkbox.md

Last active February 27, 2019 20:33
Show Gist options
  • Save mojoaxel/50de279ae47f66bd547fec4f4b9f5403 to your computer and use it in GitHub Desktop.
Save mojoaxel/50de279ae47f66bd547fec4f4b9f5403 to your computer and use it in GitHub Desktop.
Download ZIP
Simple beautiful checkbox using input type=checkbox" - CC-BY by mojoaxel - https://jsbin.com/bopoyer
Raw
_checkbox.md

image

Raw
checkbox.css
:root {
--main-text-color: #2d373c;
--box-bg-hover-color: #dfe6ed;
--element-highlight-color: #005578;
}
.checkbox {
font-family: Arial, sans-serif;
max-width: max-content;
border: none;
padding: 1em;
padding-top: 0.1em;
}
.checkbox input[type="checkbox"] {
display: none;
color: var(--main-text-color);
}
.checkbox input[type="checkbox"] + label {
position: relative;
padding-left: 1.7em;
}
.checkbox input[type="checkbox"] + label:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 1rem;
height: 1rem;
margin: 0.1em;
line-height: 0.8em;
border-radius: 25%;
border: 2px solid var(--box-bg-hover-color);
background-color: transparent;
transition: .3s ease-in-out;
}
.checkbox input[type="checkbox"] + label:after {
position: absolute;
content: '✔';
bottom: 0.3em;
left: 0.2rem;
line-height: 0;
font-size: 1.7rem;
color: transparent;
transition: .15s ease-in-out;
}
.checkbox input[type="checkbox"]:checked + label:after {
color: var(--element-highlight-color);
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Checkbox example</title>
<link rel="stylesheet" type="text/css" href="checkbox.css">
</head>
<body>
<fieldset class="checkbox">
<input id="checkbox1" type="checkbox" checked>
<label for="checkbox1">Label</label>
</fieldset>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment