Changing the structure of the Checkbox
We can replace the default checkbox appearance with a custom icon or symbol to indicate the checked or unchecked state. This can be achieved by changing CSS pseudo-elements (::before or ::after) and background images or icon fonts. Let us take an example to understand,
Example: To demonstrate customizing the checkbox using the CSS psudo-elements.
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
rel="stylesheet"
/>
<style>
.custom-checkbox .form-check-input {
display: none;
}
.custom-checkbox .form-check-label::before {
content: "\f0c8";
font-family: "Font Awesome 5 Free";
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
text-align: center;
line-height: 20px;
margin-right: 5px;
}
.custom-checkbox .form-check-input:checked
+ .form-check-label::before {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="form-check custom-checkbox">
<input class="form-check-input"
type="checkbox"
id="exampleCheckbox" />
<label class="form-check-label"
for="exampleCheckbox"
>Custom Checkbox</label
>
</div>
</body>
</html>
Output:
How to Customized Bootstrap 5 Checkbox?
Bootstrap, a widely used customizing front-end framework, streamlines web development with its pre-built CSS and JavaScript components. Bootstrap 5 Checkbox enhances interactive forms and interfaces, offering customization options for styles, sizes, and validation, facilitating user selections.
There are several approaches to customize the Bootstrap 5 Checkbox which are as follows:
Table of Content
- Changing the size of the Checkbox
- Changing the color of the Checkbox
- Changing the structure of the Checkbox
Contact Us