How to remove blue border from the checkbox (bootstrap 4.1) [duplicate]

Question

Bootstrap 4.1

How to remove blue border from the checkbox which appears on the focus?

I tried using the outline but it's not working.

The code I'm using is:

<div class="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>

The live version or example is: https://jsfiddle.net/hussainabid/mgdjprst/

Answer 1

There is a box-shadow on the following rule: .custom-control-input:focus ~ .custom-control-label::before. You can remove it by adding the following CSS (after Bootstrap CSS):

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow:none !important;
}

Note: Instead of !important you can also be more specific.

---

Example:

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow:none !important;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="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>

I don't know why the question was closed by duplicate. This has nothing to do with the outline property. Bootstrap add his own outline with box-shadow.