Changing the color of the Checkbox
To change the color of checkbox we can add the required styles by overriding the existing styles. Let us take a look over the example
Example: To demonstrate customizing the color of checked checkbox by using the class `form-check-input:checked`.
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
.custom-checkbox .form-check-input:checked {
background-color: red;
border-color: red;
}
</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