Remove light blue background on Bootstrap checkboxes - html

Question

I'm using the custom forms of Bootstrap 4 on a website and while clicking there is a weird light-blue background behind the indicator (see BS 4 documentation or picture).
I now played around with my web console and tried different things to get rid of that background, but didn't manage.
I know that the background is on the focus of the actual input, which is set to display none... I have tried adding different styles to the label and/or the input, such as box-shadow: none; outline: none; background-color: transparent; etc. but neither of them worked.
This is why I'm searching for a solution here on StackOverflow. I hope, that someone can help.
Normal unchecked custom checkbox of BS 4
The weird light-blue background appearing from nowhere on focus
The checked custom checkbox of BS 4

Answer 1

Here is something :
Bootply : https://www.bootply.com/s82twl3iDl
CSS :
.custom-control-input~.custom-control-indicator{
background-color: grey !important; // select the background color
}
.custom-control-input:focus~.custom-control-indicator{
box-shadow: none !important;
}
HTML :
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>

Answer 2

One of Bootstrap's styles is
.custom-control-input:active~.custom-control-indicator{color:#fff;background-color:#b3d7ff}
So if you don't want that, if you want it to have the same color as in the not active stage, just change it back to #ddd.
body .custom-control-input:active~.custom-control-indicator {background-color:#ddd}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
(Note: I had to add body in front of my selector to make the specificity higher, because the link to Bootstrap is included below the snippet styles.
Normally this wouldn't be necessary, since Bootstrap is normally included before your own styles.)

Answer 3

CSS
.custom-control-input:active~.custom-control-label::before {
background-color: #dee2e6;
}
The blue background appears on active.
On focus, a blue border appears. You can set the color to whatever you want. You can use the following code (below) to remove the blue border.
.custom-control-input:focus~.custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(222,226,230, .5);
}
HTML
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rememberMe"
name="rememberMe">
<label class="custom-control-label" for="rememberMe">Remember me</label>
</div>