Bootstrap 4: customize checkbox border

Question

I\'m trying to customize the color of my checkboxes. I followed the documentation and I came up with a way to change the background:

.custom-control-input:ch         


        

Answer 1

you can use for a custom border :

input[type="checkbox"]{
    width: 20px;
    height: 20px;
}
    #with{
        outline: 1px solid #f00;
    }

#shadow-checkbox{
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

<div class="checkbox">
  <label>
      <input type="checkbox" value="abc" id="with" />
      Option one
  </label>
</div>
<div class="checkbox">
  <label>
      <input type="checkbox" value="" id="shadow-checkbox"/>
      Option one
  </label>
</div>

Answer 2

To remove the blue border and reset active state background to #fff in Bootstrap v4.0.0 use:

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}
.custom-control-input:active ~ .custom-control-label::before {
    background-color: #fff;
}

Answer 3

Bootstrap 4 is using a box-shadow to get this effect:

.custom-control-input:focus~.custom-control-indicator {
    -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8;
}

The rounded border is defined with border-radius:

.custom-checkbox .custom-control-indicator {
    border-radius: .25rem;
}