7

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:checked ~ .custom-control-indicator {
        background-color: #ffa500;
}

If you click the checkbox there is also a blue border with (I think) a padding around the box itself, but even with some research, I'm unable to find how to change the color of that border too. Anyone can help me? I made a fiddle to demonstrate what I have.

Anyone know how to change that border?

Thanks in advance!

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
JC97
  • 1,530
  • 2
  • 23
  • 44

3 Answers3

12

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;
}
Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
  • That's it. Thank you very much. Can I ask you how/where you get that from? Because I've searched a few days, without succes. Maybe if you have a secret resource it could help me in the future ;) – JC97 Apr 25 '17 at 14:08
  • 2
    Google Chrome Developer Console (press F12 on your browser). Inspect the item and set the state and you get the CSS rules. – Sebastian Brosch Apr 25 '17 at 14:09
7

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;
}
Agnis
  • 131
  • 1
  • 2
-2

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>
Sabbir Mahmud Rejbi
  • 87
  • 2
  • If you copy an answer from someone else's contribution please credit them https://stackoverflow.com/questions/22553310/bootstrap-checkbox-editing-border-style-not-working – TheWebsiteGuy Feb 21 '21 at 11:07