how can I change the color of bootstrap checkbox?

Question

I have the following html code:

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

and the result of that is:

What's the simplest way of changing this color to a given one, for example D7B1D7?

Solution 1

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.

Solution 2

If you use bootstrap and you need to change checkbox color background, just override this styles:

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

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

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


    <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>

Solution 3

input[type=checkbox] does not not have a background-color property. You can use other ways to get your desirable result:

1. You can use the checkbox inside a div and then style the div according to your needs.

   <div class="row">
     <input type="checkbox" />
   </div>
   

2. You can use pseudo elements like these:

     input[type=checkbox] {
        cursor: pointer;
     }
   
    input[type=checkbox]:after {
     content: " ";
     background-color: #D7B1D7;
     display: inline-block;
     visibility: visible;
    }
   
    input[type=checkbox]:checked:after {
      content: "\2714";
    }
   

Solution 4

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

Solution 5

Simple version of AndrewRIGHT's answer:

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

View more solutions

Comments

[Yass]

I've updated my fiddle. Please see the comments in my answer. I've updated the original link.

[user3620318]

Mate, this is answered here stackoverflow.com/questions/28768623/… and here stackoverflow.com/questions/26821895/… Hope you get it working.

[user3766930]

Thanks, I tried your 2nd method and this is what I got: imgur.com/uS3J5ou it does not look exactly how I would like it to look... Could you show me some example of the first point?

[Mona]

Can you send an image/snapshot/link of how would like it to look?

[user3766930]

@Mona so I want to achieve an effect similar to the one I have already: i.stack.imgur.com/P27OU.png but instead of blue I would like to have a different color (in my case - orange)

[user3766930]

thank you very much, I viewed your fiddle and it works great, I just have one more question - is there a way of updating the html code so that I have 3 checkboxes next to each other? What I want to achieve is this imgur.com/6onY6GA and I thought it should be enough to copy the html code three times, but this is the result jsfiddle.net/pvyp4mL3/3 what am I doing wrong here?

[Yass]

If you wrap each checkbox with a class of .container it fixes the issue: jsfiddle.net/yassarikhan786/pvyp4mL3

[user3766930]

Thank you @Yass!! So is there a way of putting those checkboxes and their labels next to each other instead of one above each other? :)

[Yass]

@user3766930 Do you mean like this? jsfiddle.net/yassarikhan786/pvyp4mL3/5

[Aleks]

Answered "yesterday" - just at a right time, even the question is currently almost 3 years old ;)

[AndrewRIGHT]

:D :D I tried find solution, and when i found, just share it )

[Constantin]

Bootstrap default styles: .custom-checkbox .custom-control-input:checked~.custom-control-label::before { background-color: #007bff; } Just overriding that