How to create custom checkboxes and radio buttons with CSS?
The HTML checkbox is used to select multiple options from the list of options whereas radio buttons are used to choose only a single option. The default style of radio buttons and checkboxes can be customized using CSS.
Styling the checkboxes and radio buttons
We can use CSS properties to style the checkboxes and the radio buttons. Here is the list of some properties which we will use in our further example.
Position - It is used to position the radio buttons or checkboxes with respect to the container element.height - Set the height of the radio buttons and checkboxes.width - It is used to set the width of radio buttons and checkboxes.background-color - It is used to set the background color of the checkboxes and radio buttons.::after and ::before - It is used to represent the style of checkboxes (square and checkmark) and radio buttons (two circles).border-radius : It is used to set the border radius of the element.
Example: Customize the checkboxes using CSS
In this program, we have customized the checkboxes using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 14px;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkbox {
position: absolute;
top: 0;
left: 0;
height: 24px;
width: 24px;
background-color: #eeeeee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkbox {
background-color: #cccccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkbox {
background-color: #2196F3;
}
/* Create the checmark/indicator (hidden when not checked) */
.checkbox:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkbox:after {
display: block;
}
/* Adding tickmark when the checkbox is selected */
.container .checkbox: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>
</head>
<body>
<h1>Custom checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked" name="checkbox">
<span class="checkbox"></span>
</label>
<label class="container">Two
<input type="checkbox" name="checkbox">
<span class="checkbox"></span>
</label>
<label class="container">Three
<input type="checkbox" name="checkbox">
<span class="checkbox"></span>
</label>
<label class="container">Four
<input type="checkbox" name="checkbox">
<span class="checkbox"></span>
</label>
</body>
</html>
Output
Here is the output of the above program.
Example: Customize the radio buttons using CSS
In this example, we are customizing radio buttons using CSS styling.
Conclusion
In this tutorial, we have learned to customize the checkboxes and radio buttons using CSS. We can use properties like margin, height, background color, border, etc to customize this element.
