Bootstrap button - remove outline on Chrome OS X

Question

I am looking to achieve this: http://getbootstrap.com/javascript/#popovers-examples - scroll to the "live Demo" and hit the red popover button, in Chrome on OS X.... It's perfect beautiful

However, in my own code it outlines blue, despite a litany of CSS efforts from me to remove this!

It looks correct in Safari and Firefox but a no go in Chrome!

its not getting any blue outline there – The Hungry Dictator Jan 18 '14 at 07:18 — The Hungry Dictator, Jan 18 '14 at 07:18

score 132 · Accepted Answer · edited May 21 '20 at 22:15

132

I see .btn:focus has an outline on it:

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Try changing this to:

.btn:focus {
  outline: none !important;
}

Basically, look for any instances of outline on :focused elements — that's what's causing it.

Update - For Bootstrap v4:

.btn:focus {
  box-shadow: none;
}

edited May 21 '20 at 22:15

DalSoft

10,673
3
42
55

answered Jan 18 '14 at 06:58

Nick Heer

1,553
1
10
7

brilliant I placed this: .btn:hover, .btn:focus { outline: none; text-decoration: none; } .btn { outline: none; text-decoration: none; } Is any of this too heavy handed? – Shane Holloman Jan 18 '14 at 07:13
17

If you want to remove the outline during a click too, try this: .btn:focus, .btn:active:focus, .btn.active:focus { outline: none; ! important; outline-style: none; } – ira Oct 19 '14 at 21:30
Anyone knows why they did that? – Thomas Decaux Nov 06 '14 at 09:18
4

The dotted border is used as a tool when navigating the website using a keyboard – tvgemert Jan 09 '15 at 16:07
1

.btn:focus { box-shadow: none !important; } Solves the problem completely :) – Roman Karagodin May 23 '21 at 19:48

score 41 · Answer 2 · answered Jan 28 '15 at 15:42

41

For any googlers like me, where..

.btn:focus {
    outline: none;
}

still didn't work in Google Chrome, the following should completely remove any button glow.

.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
}

answered Jan 28 '15 at 15:42

shaneparsons

1,489
1
20
24

3

I only needed ```.btn:focus, .btn:active, .btn:active:focus```, your answer pointed me in the right direction though, so thanks! – Tom Manterfield Feb 14 '15 at 20:00
11

You may also want to add `box-shadow: none;` – Izhaki May 14 '15 at 20:41
1

For more context to people searching, using `.btn:active:focus` fixes the issue in Chrome where clicking on the button briefly flashes the blue outline. Evidently, at least in Chrome, both `:focus` and `:active` states are briefly activated when you click on the button, so you need the additional selector to address the issue. – NerdCowboy Mar 24 '16 at 19:12

score 38 · Answer 3 · answered Apr 07 '15 at 06:08

38

.btn:focus, .btn:active:focus, .btn.active:focus{
    outline:none;
    box-shadow:none;
}

This should remove outline and box shadow

answered Apr 07 '15 at 06:08

sidhartha madipalli

613
5
10

2

It was the box-shadow. Thanks! – Kajuna Jul 19 '19 at 19:28

score 19 · Answer 4 · answered Jan 02 '18 at 14:37

19

In bootstrap 4 the outline is no longer used, but the box-shadow. If it is your case, just do the following:

.btn:focus {
    box-shadow: none;
}

answered Jan 02 '18 at 14:37

George Henrique

253
2
4

score 7 · Answer 5 · answered Jun 04 '18 at 09:18

7

With scss:

$btn-focus-box-shadow: none!important;

answered Jun 04 '18 at 09:18

Hannes Be

91
1
3

score 6 · Answer 6 · answered Feb 06 '16 at 15:21

6

.btn.active or .btn.focus alone cannot override Bootstrap's styles. For default theme:

.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus {
      outline: none;
}

answered Feb 06 '16 at 15:21

Narch Tranch

61
1
2

score 4 · Answer 7 · edited Mar 25 '18 at 09:15

4

The simplest solution is: Create a CSS file and type this:

.btn:focus, .btn:active:focus, .btn.active:focus {
    box-shadow: none !important;
}

edited Mar 25 '18 at 09:15

Rohan Pillai

917
3
17
26

answered Mar 25 '18 at 08:39

Decode

41
1

score 4 · Answer 8 · answered Jun 18 '22 at 17:58

You can remove the shadow without doing any extra CSS yourself.

Normally add a button like this.
<button class="btn btn-primary">Button</button>

You can simply add shadow-none to remove the outline.
<button class="btn btn-primary shadow-none">Button</button>

score 2 · Answer 9 · answered Jan 21 '16 at 16:32

2

This will remove it - short and clean:

.btn {
    outline: none !important;
}

answered Jan 21 '16 at 16:32

Alexander Belokon

1,452
2
17
37

score 2 · Answer 10 · edited Dec 15 '18 at 15:58

Here's the solution:

#sec-one{padding: 15px 0;}
p{text-align: center;}
/*
* Change the color to any color you want;
* or set to none if you don't any outline at all.
*/
*:focus:not(a){
    outline: 2px solid #f90d0e !important;
    box-shadow: none !important;
}

<!doctype html>
<html lang="en">
<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<section id="sec-one">
<div class="container">
    <div class="row">
      <div class="col">
        <form>
          <fieldset class="form-group">
            <input type="text" class="form-control" placeholder="Full Name" required>
          </fieldset>
           <fieldset class="form-group">
            <input type="email" class="form-control" placeholder="Email Address" required>
          </fieldset>
          <fieldset class="form-group">
            <input type="submit" class="btn btn-default" value="Sign Up">
          </fieldset>
          </form>
      </div>
    </div>
</div>
</section>
</body>
</html>

This works 100% hope it helps you.

score 1 · Answer 11 · answered Apr 11 '14 at 12:54

1

Search and replace

outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;

Replace to

outline: 0;

answered Apr 11 '14 at 12:54

abxstract

319
3
11

3

Definitely don't replace anything in the native Bootstrap files. Override them and leave the originals pristine, which is what makes CSS great. I know this answer is old but in case anyone came across this I wanted to make sure this was noted. – trnelson Mar 10 '16 at 20:53

score 1 · Answer 12 · answered Sep 11 '18 at 09:35

1

If the above answers still do not work, add this:

button:focus{
    outline: none!important;
    box-shadow:none;
}

answered Sep 11 '18 at 09:35

Connor Cowling

99
1
5

score 1 · Answer 13 · answered Dec 04 '19 at 04:21

1

It worked for my bootstrap button after a such stress

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none!important;
    box-shadow: none;
}

answered Dec 04 '19 at 04:21

Mortuza Minhaz

21
1
6

score 1 · Answer 14 · answered Dec 15 '21 at 19:00

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
button.btn:focus, 
button.btn:active, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
    outline: none !important;
}

score 0 · Answer 15 · answered Sep 16 '15 at 09:20

you can put this tag into your html.

<button class='btn btn-primary' onfocus='this.blur'>
     Button Text
</button>

I used on focus because onclick still displayed the glow for a microsecond and made a horrible looking flash in terms of using it. This seemed to get rid after all the css methods failed.

score 0 · Answer 16 · answered Dec 18 '15 at 11:32

That CSS goes from this file "tab-focus.less" in mixins folder (it could be difficult to find, because mixins are not shown at chrome dev-tools). So you should edit this:

// WebKit-style focus 

.tab-focus() {
      // Default
      outline: thin dotted;
      // WebKit
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

score 0 · Answer 17 · answered May 11 '17 at 09:19

In the mixins of the Bootstrap sources Sass files, remove all $border references (not in the outline variant).

@mixin button-variant($color, $background, $border){ 
$active-background: darken($background, 10%);
//$active-border: darken($border, 12%);    
  color: $color;
  background-color: $background;
  //border-color: $border;
  @include box-shadow($btn-box-shadow);
  [...]
}

Or simply code you own _customButton.scss mixin.

score 0 · Answer 18 · answered Oct 01 '18 at 17:45

If someone is using bootstrap sass note the code is on the _reboot.scss file like this:

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

So if you want to keep the _reboot file I guess feel free to override with plain css instead of trying to look for a variable to change.

score 0 · Answer 19 · answered Jul 11 '22 at 15:56

0

Bootstrap 5 and up

.btn-primary {--bs-btn-focus-shadow-rgb: none;}

answered Jul 11 '22 at 15:56

Wbtist

1
1

score -1 · Answer 20 · answered Sep 24 '21 at 06:21

If you are using bootstrap v5.1 or any other version. To remove the outline of your bootstrap navbar toggle button do this:

.navbar-toggler:focus {
    box-shadow: none !important;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

    <title>navbar</title>
  </head>
  <body>
  
  <div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Navbar toggler button</h5>
    <span class="text-muted">Check the CSS to see how to remove the outline of the toggler button.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Hope this answer will help you.

Bootstrap button - remove outline on Chrome OS X

20 Answers20

Linked

Related