bootstrap button shows blue outline when clicked

Css Problem Overview

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

.btn:focus {
  outline: none;
}

how to remove that ugly thingy?

Css Solutions

Solution 1 - Css

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...

Solution 2 - Css

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/

Solution 3 - Css

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;
}

Solution 4 - Css

Try Below Code

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

Solution 5 - Css

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;
}

Solution 6 - Css

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.

Solution 7 - Css

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);
}

Solution 8 - Css

Try this

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

Solution 9 - Css

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;
    }
  }
}

Solution 10 - Css

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>

Solution 11 - Css

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!

Solution 12 - Css

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

Solution 13 - Css

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

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

Solution 14 - Css

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;
}

Solution 15 - Css

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

Solution 16 - Css

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;
}

Solution 17 - Css

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

Solution 18 - Css

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...

Solution 19 - Css

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.

Solution 20 - Css

a:focus {
  outline: none;
}

this works for me on BS3

Solution 21 - Css

This one worked for me in Bootstrap 4:

.btn {border-color: transparent;}

Solution 22 - Css

Try

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

Solution 23 - Css

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).

Solution 24 - Css

Try the below

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

Solution 25 - Css

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

Solution 26 - Css

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;
}

Solution 27 - Css

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

Solution 28 - Css

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;
}

Solution 29 - Css

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.

Solution 30 - Css

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.

Solution 31 - Css

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;
}

Solution 32 - Css

Change the Border Color back to Grey

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

Solution 33 - Css

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;

Solution 34 - Css

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

Solution 35 - Css

very simple :

.btn {outline: none;}

Content Type	Original Author	Original Content on Stackoverflow
Question	user3522457	View Question on Stackoverflow
Solution 1 - Css	Janak	View Answer on Stackoverflow
Solution 2 - Css	Rinat	View Answer on Stackoverflow
Solution 3 - Css	Chang	View Answer on Stackoverflow
Solution 4 - Css	Sandy	View Answer on Stackoverflow
Solution 5 - Css	barburakka	View Answer on Stackoverflow
Solution 6 - Css	Eddy	View Answer on Stackoverflow
Solution 7 - Css	Slobodan Kovacevic	View Answer on Stackoverflow
Solution 8 - Css	Subodh Sharma	View Answer on Stackoverflow
Solution 9 - Css	gildniy	View Answer on Stackoverflow
Solution 10 - Css	Gaby Evangelista	View Answer on Stackoverflow
Solution 11 - Css	paul	View Answer on Stackoverflow
Solution 12 - Css	Orahmax	View Answer on Stackoverflow
Solution 13 - Css	Danny Cullen	View Answer on Stackoverflow
Solution 14 - Css	Jason	View Answer on Stackoverflow
Solution 15 - Css	xhunter	View Answer on Stackoverflow
Solution 16 - Css	0x1ad2	View Answer on Stackoverflow
Solution 17 - Css	Tsurule Vol	View Answer on Stackoverflow
Solution 18 - Css	anthonyoride	View Answer on Stackoverflow
Solution 19 - Css	jack	View Answer on Stackoverflow
Solution 20 - Css	Alex LH	View Answer on Stackoverflow
Solution 21 - Css	Steffo Dimfelt	View Answer on Stackoverflow
Solution 22 - Css	Punitkumar Kulli	View Answer on Stackoverflow
Solution 23 - Css	RyanT	View Answer on Stackoverflow
Solution 24 - Css	Iryna Koshynska	View Answer on Stackoverflow
Solution 25 - Css	webtechnelson	View Answer on Stackoverflow
Solution 26 - Css	Vaibhav Singh	View Answer on Stackoverflow
Solution 27 - Css	Nawaraj	View Answer on Stackoverflow
Solution 28 - Css	Vishala Ramasamy	View Answer on Stackoverflow
Solution 29 - Css	Wesley Kelly	View Answer on Stackoverflow
Solution 30 - Css	Ivan Aldwin A. Cristobal	View Answer on Stackoverflow
Solution 31 - Css	ZEF	View Answer on Stackoverflow
Solution 32 - Css	Aransiola Oluwaseun	View Answer on Stackoverflow
Solution 33 - Css	Deepak	View Answer on Stackoverflow
Solution 34 - Css	Mudit Kashyap	View Answer on Stackoverflow
Solution 35 - Css	Saurabh Mistry	View Answer on Stackoverflow