How to Change The Color of Bootstrap Checkbox

How can I change the color of Bootstrap checkbox?

I've adapted the .squaredThree class from this CodePen for your example. There's a Fiddle link at the bottom of my answer if you want to see a live example.

Here's the updated CSS:

/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

I've updated your HTML to include another label, as the original label is used as a pseudo checkbox. This is your updated HTML:

<div class="container">
  <form name="queryForm" class="form-inline">
    <div class="squaredThree">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">
      <label for="checkOther"></label>
    </div>
    <label class="label-text">Other</label>
  </form>
</div>

Note that the additional label exists outside the .squaredThree div. The label has a class of .label-text as some additional styling rules are needed to move the text slightly to the right of the checkbox:

.label-text {
  position: relative;
  left: 10px;
}

Finally, the size of the check in the checkbox isn't quite right so an additional rule is needed to rectify that:

*,
::before,
::after {
  box-sizing: initial;
}

Fiddle Demo showing the above in action.

Bootstrap 4: How can I change the color of checkbox ? Simple way

You are already using Bootstrap's "custom" form controls (albeit slightly incorrectly -- the markup for custom Bootstrap 4 controls is different from your example).

Here's the correct markup for a custom checkbox in Bootstrap 4:

<div class="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>

The custom look is governed by the custom-* CSS classes. As you are seeing, the default color is Bootstrap's primary "blue" color. To make it green, you would have to override or add your own custom CSS class(es). Here is an example that uses a new class so that if you still want to use the default blue sometimes, you can.

.custom-control-input-green:focus~.custom-control-label::before {  border-color: #28a745 !important;  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;}
.custom-control-input-green:checked~.custom-control-label::before {  border-color: #28a745 !important;  background-color: #28a745 !important;}
.custom-control-input-green:focus:not(:checked)~.custom-control-label::before {  border-color: #5bd778 !important;}
.custom-control-input-green:not(:disabled):active~.custom-control-label::before {  background-color: #d6f5dd !important;  border-color: #d6f5dd !important;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-control custom-checkbox custom-checkbox-green">  <input type="checkbox" class="custom-control-input custom-control-input-green" id="customCheck1">  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label></div>

Change Bootstrap 4 checkbox background color

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>

How do you change the style of a bootstrap checkbox

Here's a demo bootply for custom checkboxes that I use, implementing bootstraps glyphicons for the icons. These degrade to ordinary checkboxes in IE8 without any additional code.

Here's the relevant CSS:

    .custom-checkbox > [type="checkbox"],
    .custom-checkbox > label{
        margin-bottom:0px !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked),
    .custom-checkbox > [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label,
    .custom-checkbox > [type="checkbox"]:checked + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left:0; 
        top: 50%;
        margin-top:-9px;
        width: 17px; 
        height: 17px;
        border: 1px solid #ddd;
        background: #ffffff;
        border-radius: 2px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        font: normal normal normal 12px/1 'Glyphicons Halflings';
        content: '\e013';
        position: absolute;
        top: 50%;
        margin-top:-7px;
        left: 2px;
        color: #94C947;
        xtransition: all .2s;
    }

    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
        opacity: 0;
        transform: scale(0);
    }
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
        content: '\2212';
        left: 2px;
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        background-color: #eeeeee;
        border-color: #eeeeee;
        cursor: not-allowed;
        opacity: 1;
        color: #dadada;
    }
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
      color: #dadada; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:disabled + label {
      color: #aaa; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:checked:focus + label:before,
    .custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
        border: 1px solid #66afe9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .custom-checkbox > label:hover:before {
        border: 1px solid #88D2FF !important;
    }
    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{
        border: 1px solid #E4E4E4 !important;
    }

and the HTML:

<div class="custom-checkbox">
    <input type="checkbox" id="cb1">
    <label for="cb1">Fancy Checkbox</label>
 </div>

HTH, -Ted

Bootstrap 4 checkbox changes size with background-color change

With the shorthand-property background you overwrite all the background-* properties, set by Bootstrap 4. I think you want to change only the background-color property, so you can use the following solution:

solution using Bootstrap 4 (alpha) - original answer:

.custom-checkbox .custom-control-indicator {  background-color: #fff;  border: 1px solid #2c2b2c;  border-radius: 50%;  height: 25px;  width: 25px; }.custom-control-description {  color: #2c2b2c;  font-size: 12px;  line-height: 2.7;  text-transform: uppercase;}
/* When I remove background the icon goes back to that default size */.custom-control-input:checked ~ .custom-control-indicator {  background-color: red !important;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"><div class="form-check">  <label class="custom-control custom-checkbox">     <input type="checkbox" class="custom-control-input">     <span class="custom-control-indicator"></span>     <span class="custom-control-description ml-4">Checkbox</span>   </label></div>

Change the background color of b-form-checkbox-group

As mentioned in the tags of the question, I am using Bootstrap-vue in my VueJS application. The main problem was, I was trying to change the checkbox background by adding CSS classes and selectors within the Vue component that has scoped SCSS.

<style scoped lang="scss">
    //CSS here
</style>

That was not working as styles for b-form-checkbox-group were global scoped.

Solution was to add the required CSS in the Common/Main SCSS file which was global scoped as well. Following CSS changes worked for me:

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: $green-200;
    background-color: $green-100;
 }

How do you change the background color on the active state of a Bootstrap custom checkbox?

What you need to do is to open bootstrap CSS and find the exact classes you need to override. Here you have an example of custom colors.

NOTE: !important was only required here in this snippet, otherwise it wouldn't work on Stackoverflow. You don't need to use it in your project.

.custom-control-input:checked ~ .custom-control-label::before {  color: #fff;  border-color: red !important;  background-color: red !important;}
.custom-control-input:focus ~ .custom-control-label::before {  box-shadow: 0 0 0 0.2rem rgba(255,0,0,.25) !important;}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {  border-color: green !important;}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {  color: #fff;  background-color: yellow !important;  border-color: yellow !important;}
.custom-control-input:disabled ~ .custom-control-label {  color: blue !important;}
.custom-control-input:disabled ~ .custom-control-label::before {  background-color: pink !important;}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {  border-color: red !important;  background-color: red !important;}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {  background-color: rgba(0, 123, 255, 0.5) !important;}
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {  background-color: rgba(0, 123, 255, 0.5) !important;}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {  border-color: red !important;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="custom-control custom-checkbox p-5">  <input type="checkbox" class="custom-control-input" id="customCheck1">  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label></div>

How can I change the checked background color of this Bootstrap 4 toggle switch?

You can simply altered every possible properties that can affect the color like

.custom-control-input:checked, .custom-control-label::before, .custom-control-input:active and .custom-control-input:focus

but you have to pay attention on altering .custom-control-input::after because it will destroy the pointer inside the toggle switch

Example

.custom-control-input:focus~.custom-control-label::before {
  border-color: red !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 47, 69, 0.25) !important;
}

.custom-control-input:checked~.custom-control-label::before {
  border-color: red !important;
  background-color: red !important;
}

.custom-control-input:active~.custom-control-label::before {
  background-color: red !important;
  border-color: red !important;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: red !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
  background-color: red !important;
  border-color: red !important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>

Checkbox CSS cannot change background color for the checkbox

You can't modify checkbox color.

Instead, create pseudo elements with background custom background color, like this :

.form-check {
  position: relative;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
}

input[type=checkbox]:checked+label::before {
  content: "";
  display: block;
  position: absolute;
  text-align: center;
  height: 20px;
  width: 20px;
  left: 0;
  top: 5px;
  background-color: #FA9E57;
  font-family: "Montserrat";
  border-radius: 2px;
  border: 1px solid rgb(150 150 150 / 30%);
}

input[type=checkbox]:checked+label::after {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="register.css">

<div class="form-group my-4">
   <div class="form-check">
     <input class="form-check-input" type="checkbox" id="privacy">
     <label class="form-check-label ml-3" for="privacy">
      Agree privacy
     </label>
   </div>
</div>

---

Related Topics