How TO – Custom Checkbox

Previous

Next

Learn how to create custom checkboxes and radio buttons with CSS.

Custom Checkboxes

One

Two

Three

Four

How To Create a Custom Checkbox

Step 1) Add HTML:

Example

<label class=”container”>Three
<input type=”checkbox”>
<span class=”checkmark”></span>
</label>

Step 2) Add CSS:

Example

/* Hide the browser’s default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: “”;
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>

<h1>Custom Checkboxes</h1>
<label>One
<input type=”checkbox” checked=”checked”>
<span></span>
</label>
<label>Two
<input type=”checkbox”>
<span></span>
</label>
<label>Three
<input type=”checkbox”>
<span></span>
</label>
<label>Four
<input type=”checkbox”>
<span></span>
</label>

</body>
</html>

How To Create a Custom Radio Button

Example

<!DOCTYPE html><html><style>/* The container */.container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} /* Hide the browser’s default radio button */.container input { position: absolute; opacity: 0; cursor: pointer;} /* Create a custom radio button */.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%;} /* On mouse-over, add a grey background color */.container:hover input ~ .checkmark { background-color: #ccc;} /* When the radio button is checked, add a blue background */.container input:checked ~ .checkmark { background-color: #2196F3;} /* Create the indicator (the dot/circle – hidden when not checked) */.checkmark:after { content: “”; position: absolute; display: none;} /* Show the indicator (dot/circle) when checked */.container input:checked ~ .checkmark:after { display: block;} /* Style the indicator (dot/circle) */.container .checkmark:after { top: 9px;left: 9px;width: 8px;height: 8px;border-radius: 50%;background: white;}</style><body> <h1>Custom Radio Buttons</h1><label>One <input type=”radio” checked=”checked” name=”radio”> <span></span></label><label>Two <input type=”radio” name=”radio”> <span></span></label><label>Three <input type=”radio” name=”radio”> <span></span></label><label>Four <input type=”radio” name=”radio”> <span></span></label> </body></html>

Previous

Next