[css] bootstrap button shows blue outline when clicked

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

.btn:focus {
  outline: none;
}

how to remove that ugly thingy?

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

This one worked for me in Bootstrap 4:

.btn {border-color: transparent;}

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.

Change the Border Color back to Grey

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

Try the below

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

a:focus {
  outline: none;
}

this works for me on BS3

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

This may help if someone still has this question unresolved.

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

.btn-clear {_x000D_
  background-color: transparent !important;_x000D_
  border-style: none !important;_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
.btn-clear:active,_x000D_
.btn-clear:focus {_x000D_
  outline-style: none !important;_x000D_
  outline-color: transparent;_x000D_
}

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

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

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;

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

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

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

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

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

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.

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

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

very simple :

.btn {outline: none;}

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

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

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>

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

.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {_x000D_
    outline: none !important;_x000D_
}_x000D_
_x000D_
.btn {_x000D_
  margin:32px;_x000D_
}

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

Hoping it will help!

In Bootstrap 4 they use box-shadow: 0 0 0 0px rgba(0,123,255,0); on :focus, si 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);
}

Try

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

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

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.

Try Below Code

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

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

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

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

Try this

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

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