bootstrap button shows blue outline when clicked

Question

I added this but still the blue outline appear when the button is clicked.

.btn:focus {
  outline: none;
}

how to remove that ugly thingy?

try to set `:active` for the button. Additional: **Use the Inspector** in your browser to find the Problem. — Adrian Preuss, Apr 28 '14 at 05:39
Can you post your bit more code or jsfiddle demo so that we can help you — Richa, Apr 28 '14 at 05:41
Not sure about buttons but bootstrap adds box-shadow to input fields which can be removed with box-shadow:none; — davidcondrey, Sep 11 '14 at 00:18
FWIW, the focus styling is important for keyboard navigation. — Nate Whittaker, May 12 '16 at 14:00

Janak · Answer 1 · 2020-07-06T06:53:56.660

267

May be your properties are getting overridden. Try attaching !important to your code along with the :active .

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

Also add box-shadow because otherwise you will still see the shadow around button.

Although this isn't a good practise to use !important I suggest you use more specific class and then try applying the css with the use of !important...

edited Jul 06 '20 at 06:53

answered Apr 28 '14 at 09:57

Janak

4,986
4
27
45

@Janak But why is it necessary when overriding the :active? – Jul 06 '16 at 03:52
I may also add that when nuking with !important, the pseudo-classes aren't necessary – Jul 06 '16 at 03:54
8

If you're using Bootstrap 4, add `box-shadow: none` (and don't forgot the prefix `-webkit-box-shadow: none`) to this answer. Also note that Bootstrap 4 already has `.btn:focus { outline: none }` in its btn classes. – Cooleronie Jan 14 '17 at 23:59
1

Visual cues are critical when not navigating with a mouse. If you remove the outline you must add some other visual feedback, or you will have crippled your site. – Josef Engelfrost Aug 08 '17 at 14:29

Rinat · Answer 2 · 2022-05-21T17:36:31.473

122

There are built-in boostrap class shadow-none for disabling box-shadow (not outline) (https://getbootstrap.com/docs/4.1/utilities/shadows/). This removes shadow of button:

<button class='btn btn-primary shadow-none'>Example button</button>

Update: docs link for bootstrap 5: https://getbootstrap.com/docs/5.1/utilities/shadows/, and for beta: https://getbootstrap.com/docs/5.2/utilities/shadows/

edited May 21 '22 at 17:36

answered May 18 '18 at 05:44

Rinat

1,941
2
17
26

18

this is the best answer – jmrueda Feb 27 '19 at 06:59
5

This IS the solution you're looking for. This is the solution, move along, move along. Thanks this solved it for Firefox with Bootstrap 4. – swudev Mar 31 '19 at 02:14
This post is about removing the outline, not the shadow. So sadly, this comment is misleading. – Clay Records Apr 25 '19 at 21:10
Yes, it was the best answer but why it is not accepted on Alert Dismissing cross button – Nawaraj Aug 27 '19 at 02:08
1

Does not work. The CSS solution from the other answers work. – Dan P. Jun 28 '20 at 23:29
It helped me indirectly. I named my class as btn-primary which is also a bootstrap class which is causing problem. – devspartan Sep 16 '20 at 13:52

score 62 · Answer 3 · answered Apr 07 '17 at 11:49

62

In the latest version of Bootstrap, I found removing outline itself doesn't work. And I have to add this because there is also a box-shadow:

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

answered Apr 07 '17 at 11:49

Chang

1,658
1
17
23

1

This is what helped for me. – Vahx Jun 10 '17 at 09:36
If you want to make sure you're hitting all of your buttons, just use button { outline: none !important; box-shadow: none !important; } – Drew Oct 05 '18 at 15:29

score 22 · Answer 4 · edited Mar 23 '18 at 22:15

22

Try Below Code

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

edited Mar 23 '18 at 22:15

Jeffrey Roosendaal

6,872
8
37
55

answered Apr 28 '14 at 09:51

Sandy

663
1
4
9

4

I only needed this part to remove the outline in chrome: button:focus {outline:none;} – TTT Jan 20 '16 at 20:43

score 13 · Answer 5 · answered May 31 '15 at 12:00

This was happening to me in Chrome (though not in Firefox). I've found out that the outline property was being set by Bootstrap as outline: 5px auto -webkit-focus-ring-color;. Solved by overriding the outline property later in my custom CSS as follows:

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

score 12 · Answer 6 · answered Sep 09 '15 at 13:13

this will solve button with a text, button only a icon or a button is a link:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

if you add border:none !important;

{
    border:none !important;
    outline:none !important;
}

then the button will become smaller size when clicked.

score 10 · Answer 7 · edited Oct 29 '21 at 18:57

In Bootstrap 4 they use box-shadow: 0 0 0 0px rgba(0,123,255,0); on :focus, so i solved my problem with

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

score 9 · Answer 8 · edited Jul 24 '18 at 13:04

9

Try this

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

edited Jul 24 '18 at 13:04

MarmiK

5,639
6
40
49

answered Jul 24 '18 at 07:56

Subodh Sharma

303
3
9

score 6 · Answer 9 · answered Apr 30 '20 at 03:38

The SCSS way for all elements (not only buttons):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}

score 4 · Answer 10 · answered Mar 31 '17 at 03:36

This may help if someone still has this question unresolved.

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

score 4 · Answer 11 · edited Aug 08 '17 at 14:33

I just had the same issue and the following code worked for me:

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

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

Hoping it will help!

score 3 · Answer 12 · answered Apr 28 '14 at 05:41

You need to use proper nesting and then apply styles to it.

Right click on button and find the exact class nesting for it using (Inspect element using firebug for firefox), (inspect element for chrome).
Add style to whole bunch of class. Only then it would work

score 3 · Answer 13 · answered Feb 16 '16 at 14:07

3

I found this quite useful in my case after the button click.

$('#buttonId').blur();

answered Feb 16 '16 at 14:07

Danny Cullen

1,782
5
30
47

score 3 · Answer 14 · answered May 12 '16 at 13:25

I opted to simply remove the border width on :focus. This removes the ugly space between the outline and the button's rounded corners. For some reason this issue only happens on actual button elements and not <a class="btn"> elements.

button.btn:focus {
  border-width: 0;
}

score 3 · Answer 15 · answered Apr 05 '17 at 13:47

3

Sometimes {outline: 0} didn't solve the problem and we can try {box-shadow: none;}

answered Apr 05 '17 at 13:47

xhunter

49
7

score 3 · Answer 16 · answered Jun 03 '17 at 13:05

3

Here's my Boostrap 4 solution to remove the button outline

/*
* Boostrap 4
* Remove blue outline from button
*/

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

answered Jun 03 '17 at 13:05

0x1ad2

8,014
9
35
48

score 3 · Answer 17 · answered Sep 11 '18 at 09:00

Actually in bootstrap is defined all variables for all cases. In your case you just have to override default variable '$input-btn-focus-box-shadow' from '_variables.scss' file. Like so: $input-btn-focus-box-shadow: none; Note that you need to override that variable in your own custom '_yourCusomVarsFile.scss'. And that file should be import in project in first order and then bootstrap like so:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

The bootstraps vars goes with flag '!default'.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

So in your file, you will override default values. Here the illustration:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

The very first var have more priority then second one. The same is for the rest states and cases. Hope it will help you.

Here is '_variable.scss' file from repo, where you can find all initials values from bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

score 3 · Answer 18 · answered Feb 05 '20 at 13:31

Even after removing the outline from the button by setting its value to 0, There is still a funny behaviour on the button when clicked, its size shrinks a bit. So i came up with an optimal solution:

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

Hope this helps...

score 3 · Answer 19 · answered Jun 06 '21 at 11:07

How to avoid border focus on click of bootstrap buttons:

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

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

How to avoid border focus on click of bootstrap input fields:

.form-control.focus, .form-control:focus {
    outline: 0;
    box-shadow: none;
}

If this doesn't work for your specific case, then I suggest you to open the inspector page, click on the selector tool (small arrow in a box in the top-left corner) click on the element you are trying to edit, then click again on the same element and look at the "Styles" tab to see what changes in terms of CSS... search something related to "focus" and you should be able to detect the code you have to overwrite in your CSS. Hope this is helpful.

score 2 · Answer 20 · answered Jan 08 '17 at 19:37

2

a:focus {
  outline: none;
}

this works for me on BS3

answered Jan 08 '17 at 19:37

Alex LH

41
3

score 2 · Answer 21 · answered Jul 23 '18 at 21:26

2

This one worked for me in Bootstrap 4:

.btn {border-color: transparent;}

answered Jul 23 '18 at 21:26

Steffo Dimfelt

870
12
11

score 2 · Answer 22 · edited Sep 06 '19 at 11:47

2

Try

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

edited Sep 06 '19 at 11:47

Jitesh Prajapati

2,533
4
29
51

answered Sep 06 '19 at 11:30

Punitkumar Kulli

61
1
5

score 1 · Answer 23 · answered Nov 07 '14 at 20:37

Keep in mind, if you're button is inside of an anchor like:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

Adding the style to the button itself may not be enough, you may need to add the a:focus, a:active { outline: none } CSS rules where appropriate (this worked for me).

score 1 · Answer 24 · edited Jul 06 '16 at 11:59

1

Try the below

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

edited Jul 06 '16 at 11:59

Sreehari

5,621
2
25
59

answered Jul 06 '16 at 11:54

Iryna Koshynska

11
1

score 1 · Answer 25 · edited Jun 02 '17 at 15:11

1

I'm using bootstrap 4, you can use outline and box-shadow.

#buttonId {
    box-shadow: none;
    outline: none;
}

Or if the button is inside an element like a div without back-ground, box-shadow is enough.

#buttonId {
     box-shadow: none;
}

Example: https://codepen.io/techednelson/pen/XRwgRB

edited Jun 02 '17 at 15:11

Cameron

2,574
22
37

answered Jun 02 '17 at 14:33

webtechnelson

330
1
7
13

score 1 · Answer 26 · edited May 11 '19 at 15:05

1

If you are using version 4.3 or higher, your code will not work properly. This is what I used. It worked for me.

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

edited May 11 '19 at 15:05

sohnryang

725
2
13
27

answered May 11 '19 at 12:29

Vaibhav Singh

11
2

You're right. It doesn't work without -webkit-box-shadow: none !important; line. – Emir Sep 09 '19 at 11:27

Nawaraj · Answer 27 · 2019-08-27T03:17:29.707

1

Instead to target on button class (.btn), here I target to button element itself and it works for me.

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

And can use shadow-none class for input field

edited Aug 27 '19 at 03:17

answered Aug 27 '19 at 02:33

Nawaraj

425
5
20

score 1 · Answer 28 · edited Nov 04 '20 at 07:41

1

You can add below answer to your _variable.scss file, no need to change the other outline or any thing. I'm sure this will work.

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

edited Nov 04 '20 at 07:41

nishkaush

1,512
1
13
20

answered Nov 04 '20 at 04:31

Deepak

11
2

score 1 · Answer 29 · answered Jul 18 '21 at 17:20

1

For Check box and radio buttons

.form-check-input:checked ,.form-check-input:focus,.form-check-input:active {
  outline: none !important;
  box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
}

answered Jul 18 '21 at 17:20

Vishala Ramasamy

317
2
6

score 0 · Answer 30 · answered Aug 17 '17 at 01:31

Here's a non-CSS method. Using JQuery, simply remove the "focus" class whenever the element is has been clicked.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

This method may cause the border to flash into existence and then back out briefly, which doesn't look bad in my opinion (it looks like part of the response when the button is clicked).

The reason I used .mousemove() is that .click() and .mouseup() both proved to be ineffective.

neh. add more javascript to defeat CSS isn't the best of practices. IMHO. — David, Feb 26 '18 at 15:41

score 0 · Answer 31 · answered Mar 05 '19 at 13:41

Changing these values worked for me. I found it by looking at the Developer Tools of Chrome

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

This retains the shadow of the button too, it only changes the color of the button on-click.

score 0 · Answer 32 · answered Apr 30 '19 at 20:30

Override the exact bootstrap statements:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

score 0 · Answer 33 · answered Jan 29 '20 at 15:52

0

Change the Border Color back to Grey

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

answered Jan 29 '20 at 15:52

Aransiola Oluwaseun

177
2
8

score 0 · Answer 34 · answered Mar 24 '21 at 17:18

0

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

answered Mar 24 '21 at 17:18

Mudit Kashyap

37
6

1

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Ran Marciano Mar 24 '21 at 19:34
Actually, WHen you click on a button it's being focused and active. So we are using .btn:focus, btn:active. and we are removing the outline and box-shadow using none. and we are using !important because in bootstrap css file it's by default written to make outline in button. I hope it's the proper explanation. Outline: An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". – Mudit Kashyap Apr 08 '21 at 13:00

score 0 · Answer 35 · answered Oct 13 '22 at 09:19

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

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">



<button type="button" class="btn btn-primary">Button</button>

score -1 · Answer 36 · answered Feb 08 '19 at 14:29

-1

very simple :

.btn {outline: none;}

answered Feb 08 '19 at 14:29

Saurabh Mistry

12,833
5
50
71

bootstrap button shows blue outline when clicked

36 Answers36

Linked

Related