Change Bootstrap 4 checkbox background color

Question

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

    <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,    .custom-control-label::after {   top: .8rem;   width: 1.25rem;   height: 1.25rem;   }   </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>   

Answer 1

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