Skip to content

Instantly share code, notes, and snippets.

@devellopah

devellopah/custom.html

Last active June 9, 2020 07:58
Show Gist options
  • Save devellopah/712b1c57242b050c748775c4b35eea83 to your computer and use it in GitHub Desktop.
Save devellopah/712b1c57242b050c748775c4b35eea83 to your computer and use it in GitHub Desktop.
Download ZIP
custom radio and checkbox
Raw
custom.html
<!DOCTYPE html>
<html>
<style>
.custom-input {
font-size: 16px;
letter-spacing: 0.2px;
padding-left: 40px;
font-family: "Fira Sans SemiBold";
margin: 0 0 26px 0;
padding-top: 4px;
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.custom-input__element {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.custom-input__checkmark {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border: 2px solid #1d1919;
background-color: #fff;
transition: all 0.3s ease-out;
}
/* On mouse-over */
.custom-input:hover .custom-input__element:not(:checked) ~ .custom-input__checkmark:after {
background: rgba(0, 0, 0, 0.25);
display: block;
}
/* When the checkbox is checked */
.custom-input .custom-input__element:checked ~ .custom-input__checkmark {
}
/* Create the custom-input__checkmark/indicator (hidden when not checked) */
.custom-input__checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the custom-input__checkmark when checked */
.custom-input .custom-input__element:checked ~ .custom-input__checkmark:after {
display: block;
background: black;
}
/* Style the custom-input__checkmark/indicator */
.custom-input .custom-input__checkmark:after {
width: 15px;
height: 15px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.custom-input_circle .custom-input__checkmark,
.custom-input_circle .custom-input__checkmark:after {
border-radius: 50%;
}
</style>
<body>
<label class="custom-input">One
<input type="checkbox" checked="checked" class="custom-input__element">
<span class="custom-input__checkmark"></span>
</label>
<label class="custom-input">Two
<input type="checkbox" class="custom-input__element">
<span class="custom-input__checkmark"></span>
</label>
<label class="custom-input custom-input_circle">Three
<input type="radio" checked="checked" name="radio" class="custom-input__element">
<span class="custom-input__checkmark"></span>
</label>
<label class="custom-input custom-input_circle">Four
<input type="radio" name="radio" class="custom-input__element">
<span class="custom-input__checkmark"></span>
</label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment