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

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/

Try use your browsers dev tool (ctrl+shift+i in Chrome) and see what css is making the border and simply alter it to your liking. — Martin, Aug 23 '18 at 07:50
Possible duplicate: https://stackoverflow.com/a/1457976/7570485 — Xnkr, Aug 23 '18 at 07:51
These utility classes *might* help: https://getbootstrap.com/docs/4.1/utilities/shadows/. I haven't checked. — Klooven, Aug 23 '18 at 07:56
this isn't a duplicate by the linked question. bootstrap is using `box-shadow` (not `outline`) to create the outline of the checkbox. — Sebastian Brosch, Aug 23 '18 at 08:12
It *is* a duplicate of https://stackoverflow.com/questions/43612852/bootstrap-4-customize-checkbox-border ... see the 2nd answer. — Carol Skelly, Aug 25 '18 at 10:59

Sebastian Brosch · Answer 1 · 2018-08-23T08:06:59.063

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.

score 0 · Answer 2 · answered Aug 23 '18 at 07:52

0

The blue border is not defined by standard focus outline. Instead, it is set by bootstrap with a box-shadow property you need to override like this

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

answered Aug 23 '18 at 07:52

PIIANTOM

1,311
11
20

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

2 Answers2