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

manoj sahni 0
Viewed 33

enter image description here

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,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

.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 class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">Default checkbox</label>
</div>
<div class="myTest custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

twitter-bootstrap css html
1 Answers

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 class="form-check">
  <input type="checkbox" id="flexCheckDefault">
  <label for="flexCheckDefault">Default checkbox</label>
</div>

DreamTeK0
Related