Change Bootstrap 4 checkbox background color

Question

I\'m wondering how can I change Bootstraps 4 checkbox background color on this given example.

Answer 1

I'd like to add an answer here that's a bit simpler and more generic version of knetsi's answer, for those who may not be interested in making the color change contingent on the :checked pseudo-class.

I simply wanted to define a class my-error that I can add or remove to the checkbox to change its color, in this case to reflect an error condition. The color stays the same whether the box is checked or not.

Here's how it looks in code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<style>
  .custom-checkbox .custom-control-input.my-error~.custom-control-label::before{
    background-color:orangered;
  }
</style>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input my-error" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Answer 2

you can use the following css to make it red when it is not checked, and black when it is checked

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

The color of the arrow can be changed by the following code

.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");
}

this code will make the tick red, you can change the color by changing the fill='red' value to a color of your choice.

Edit: Note, if specifying RGB color, eg. #444444 use %23 for the hash, eg. %23444444

Or you could use any image you like instead.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<style>
    .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); 
    }
</style>  

<div class="custom-control form-control-lg custom-checkbox">  
    <input type="checkbox" class="custom-control-input" id="customCheck1">  
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>  
</div>

EDIT: added a focus color (pinkish) after a request from @cprcrack

Answer 3

Programming environment Angular 10.0

Preview-

Html

<!-- BLUE CHECKBOX -->
<div class="custom-control custom-checkbox">
  <input type="checkbox" [checked]="true" class="custom-control-input" [id]="['chk-add',item.id,uniqueTag].join('-')" />
  <label class="custom-control-label" [for]="['chk-add',item.id,uniqueTag].join('-')"></label>
</div>
<!-- GREEN CHECKBOX -->
<div class="custom-control-products custom-checkbox-products">
  <input type="checkbox" [checked]="true" class="custom-control-input-products" [id]="['chk-add',item.id,td.id,uniqueTag].join('-')" />
  <label class="custom-control-label-products" [for]="['chk-add',item.id,td.id,uniqueTag].join('-')"></label>
</div>

Scss / css

  .custom-control-products {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
  }

  .custom-control-input-products {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
  }
  
  .custom-control-input-products:checked ~ .custom-control-label-products::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
  }
  
  .custom-control-input-products:focus ~ .custom-control-label-products::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  
  .custom-control-input-products:focus:not(:checked) ~ .custom-control-label-products::before {
    border-color: #80bdff;
  }
  
  .custom-control-input-products:not(:disabled):active ~ .custom-control-label-products::before {
    color: #fff;
    background-color: #b3d7ff;
    border-color: #b3d7ff;
  }
  
  .custom-control-input-products[disabled] ~ .custom-control-label-products, .custom-control-input-products:disabled ~ .custom-control-label-products {
    color: #6c757d;
  }
  
  .custom-control-input-products[disabled] ~ .custom-control-label-products::before, .custom-control-input-products:disabled ~ .custom-control-label-products::before {
    background-color: #e9ecef;
  }
  
  .custom-control-label-products {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
  }
  
  .custom-control-label-products::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
  }
  
  .custom-control-label-products::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
  }
  
  .custom-control-input-products:checked ~ .custom-control-label-products::before {
    color: #fff;
    border-color: #007bff;
    background-color: #17a2b8a8 !important;
  }

  .custom-checkbox-products .custom-control-label-products::before {
    border-radius: 0.25rem;
  }
  
  .custom-checkbox-products .custom-control-input-products:checked ~ .custom-control-label-products::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
  }
  
  .custom-checkbox-products .custom-control-input-products:indeterminate ~ .custom-control-label-products::before {
    border-color: #007bff;
    background-color: #007bff;
  }
  
  .custom-checkbox-products .custom-control-input-products:indeterminate ~ .custom-control-label-products::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
  }
  
  .custom-checkbox-products .custom-control-input-products:disabled:checked ~ .custom-control-label-products::before {
    background-color: rgba(0, 123, 255, 0.5);
  }
  
  .custom-checkbox-products .custom-control-input-products:disabled:indeterminate ~ .custom-control-label-products::before {
    background-color: rgba(0, 123, 255, 0.5);
  }