In order to create a custom checkbox, we will first hide the default checkbox by setting the display property to none. Afterwards, we will start applying styles to the label that will represent the checkbox.
Here’s a simple example of how to do it:
1. HTML:
```
```
1. CSS:
```
/* Hide the default checkbox */
.custom-checkbox input {
display: none;
}
/* Create a new custom checkbox */
.custom-checkbox .checkmark {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background: white;
border: 1px solid #ddd;
}
/* Create the indicator (tick mark) */
.custom-checkbox input:checked ~ .checkmark::after {
content: “”;
position: absolute;
left: 5px;
top: 2px;
width: 5px;
height: 10px;
border: solid black;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
/* When the checkbox is ticked, add a blue background */
.custom-checkbox input:checked ~ .checkmark {
background-color: #2196F3;
}
```
In this example, the “.checkmark” is the custom checkbox, and when the user clicks the label, the tick mark appears inside the “.checkmark” span as a ::after pseudo-element.
You can further customize your checkbox by changing the width, height, border, colors, and add animations or effects over hover, focus, or active states. The possibilities are endless and it’s a great opportunity to make your forms more attractive and integrated with your website style.
