7

Bootstrap 4.1

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

enter image description here

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/

Sebastian Brosch
  • 39,662
  • 14
  • 68
  • 78
Hussain Abid
  • 111
  • 1
  • 8
  • 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
  • 1
    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
  • 1
    NOT a duplicate indeed – PIIANTOM Aug 23 '18 at 08:52
  • It *is* a duplicate of https://stackoverflow.com/questions/43612852/bootstrap-4-customize-checkbox-border ... see the 2nd answer. – Zim Aug 25 '18 at 10:59

2 Answers2

17

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.

Sebastian Brosch
  • 39,662
  • 14
  • 68
  • 78
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;
}
PIIANTOM
  • 1,111
  • 10
  • 18