How to customized Bootstrap 5.2 checks and radios

Bootstrap is one of the more known and used UI frameworks. It is completely free and open source. Bootstrap 5 is based on HTML, CSS, and vanilla JavaScript. It permits the build of quickly fully responsive sites and is very customizable.

However, some elements like radios, checks, and switches are complicated to personalize.

Here there is documentation of Bootstrap checks and radios.

But how to customize those elements?
There is a pure design of checks and radios with Bootstrap 5.2

To examine how it is stylized it is necessary to inspect a website.

Thanks to this analysis we see that circle in the middle of the radio input is an image. The same is for the checkbox and switch. We can see which class is necessary to change the background color of a checked element.

To change an element in the middle of the radio or checkbox I downloaded some images. Now I can change a css of each element:
This is a CSS for a switch box:

.form-switch .form-check-input {
  background-image: url(/ball-147676_640.png);
  background-color: yellow;
}

.form-switch .form-check-input:checked {
  background-image: url(/ball-147676_640.png);
  background-color: red;
  border-color: red;
}

.form-switch .form-check-input:focus {
  background-image: url(/ball-147676_640.png);
  box-shadow: 0 0 4px 4px violet;
  border-color: violet;
}

switchbox:

focused switchbox:

active switchbox:

To personalize a radio we do the same:

.form-check-input:checked[type=radio] {
  background-image: url(/colors-155896_640.png);
  background-color: aquamarine;
  border-color: aquamarine;
}
.form-check-input:focus[type=radio] {
  box-shadow: 0 0 4px 4px aquamarine
}

and this is a result:

It is time to see how it works for the checkbox:

.form-check-input:checked[type=checkbox]{
  background-image: url(/bootstrap.jpeg);
}

.form-check-input:focus[type=checkbox] {
  box-shadow: 0 0 4px 4px violet;
}

Although it is not obvious, it is possible to customize even those elements.

answer re: How to personalize a switch checkbox in Bootstrap 5

Oct 27 '22

0

The circle inside is an SVG so to change it I need to use a new SVG

This is a basic switch checkbox Bootstrap code:

 <div class="form-check form-switch back"&gt
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
 </div>

I downloaded an image to the local repository

And…

Open Full Answer