31

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

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



<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>
Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Bezelinjah
  • 1,148
  • 4
  • 11
  • 21

4 Answers4

70

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

Matt
  • 4,261
  • 4
  • 39
  • 60
knetsi
  • 1,601
  • 1
  • 16
  • 18
  • sweet but how about changing color of the icon inside? – Bezelinjah Jan 22 '18 at 00:24
  • added the css that you have to use to be able to change the tick icon – knetsi Jan 22 '18 at 00:33
  • 2
    What about the light blue that shows up when holding down the mouse click? – shaneparsons Sep 13 '18 at 16:07
  • 2
    @shaneparsons updated the code snippet, now it should be displayed as green. – knetsi Sep 13 '18 at 20:17
  • What about the light blue shadow that shows up around when focused? – cprcrack Nov 22 '18 at 17:53
  • @cprcrack good question, that is the focus state of the checkbox, will update the answer to include it – knetsi Nov 23 '18 at 10:41
  • Thanks. As a side note, %23 as the hash on the svg fill attribute `fill='%23aabbcc'` for a hex color. – Ajai Johal Mar 30 '19 at 13:02
  • So it's not possible using the color schemes like "primary" and "info" and the rest? – Eric McWinNEr Sep 12 '19 at 03:45
  • I used this answer to style `custom-contol-info` adding a class override `.custom-checkbox.custom-control-info .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--info); } ` – Kieran Oct 02 '19 at 01:21
  • I hoped there would be something like custom-control-primary custom-control-secondary but I'm just being lazy. – Andy May 01 '21 at 14:43
  • For the green one, you'll also need to exclude the disabled inputs by using `.custom-control-input:active:not(:disabled) ~ .custom-control-label::before`. Otherwise, when the component is disabled and you press your cursor on it, you can see the green color. – blackr1234 May 08 '21 at 02:38
0

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>
workerjoe
  • 2,421
  • 1
  • 26
  • 49
-1

Programming environment Angular 10.0

Preview- 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);
  }
TylerH
  • 20,799
  • 66
  • 75
  • 101
-1

Use following css

input.form-check-input:checked {
  background-color: black;
}