How can chagnge bg color of checked input checkout box in bootstrap 5? i m using angular 12-CodePudding

I m trying to change background color of the input checkbox 'when checked' in bootstrap 5, I even found some solutions for custom bootstrap checkbox but it is also not working,any help on this would be appreciated. Thanks.

/*Default Checkbox*/

.form-check .form-check-input:checked~.form-check-label::before {
  background-color: green!important;
}

.form-check .form-check-input:checked:focus~.form-check-label::before {
  box-shadow: 0 0 0 1px rgb(220, 7, 7), 0 0 0 0.2rem rgba(0, 255, 0, 0.25)
}

.form-check .form-check-input:focus~.form-check-label::before {
  box-shadow: 0 0 0 1px rgb(31, 161, 175), 0 0 0 0.2rem rgba(0, 0, 0, 0.25)
}

.form-check .form-check-input:active~.form-check-label::before {
  background-color: #e112cc;
}


/*Custom Checkbox*/

.custom-control-label:before {
  background-color: red;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: black;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg xml;charset=utf8,");
}

.custom-control-input:active~.custom-control-label::before {
  background-color: green;
}


/** focus shadow pinkish **/

.custom-checkbox .custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 0, 247, 0.25);
}

<div >
  <input  type="checkbox" value="" id="flexCheckDefault">
  <label  for="flexCheckDefault">Default checkbox</label>
</div>
<div >
  <input type="checkbox"  id="customCheck1">
  <label  for="customCheck1">Check this custom checkbox</label>
</div>

CodePudding user response：

The checkbox styling is derived from the browser engine and cannot be edited with css.

You will, as you noted, need to make a custom checkbox.

Here is an example:

.form-check {
  position: relative;
}

[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

[type=checkbox] label {
  margin-left: 20px;
}

[type=checkbox] label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 11px;
  height: 11px;
  border: 2px solid #8f8f9d;
  border-radius: 3px;
}

[type=checkbox]:checked label::before {
  content: "✔";
  background: green;
  border-color: green;
  color: #fff;
  line-height: 11px;
  font-size: 11px;
  text-align: center;
}

<div >
  <input type="checkbox" id="flexCheckDefault">
  <label for="flexCheckDefault">Default checkbox</label>
</div>