Reputation: 2963

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?

Upvotes: 183

Answers (30)

Ravishka Bhashitha

Reputation: 1

This will solve the bootstrap button outline that appears when clicking the button.

.btn:focus{
border: none;
}

Upvotes: 0

madhusudan golegaonkar

Reputation: 41

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

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



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

Upvotes: 4

Rinat

Reputation: 2021

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/

Upvotes: 129

Slobodan Kovacevic

Reputation: 121

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

Upvotes: 12

Vishala Ramasamy

Reputation: 367

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

Upvotes: 1

jack

Reputation: 553

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.

Upvotes: 4

Mudit Kashyap

Reputation: 95

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

Upvotes: 1

Deepak

Reputation: 11

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;

Upvotes: 1

Janak

Reputation: 5052

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

Upvotes: 274

gildniy

Reputation: 3943

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

Upvotes: 6

anthonyoride

Reputation: 39

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

Upvotes: 3

Aransiola Oluwaseun

Reputation: 187

Change the Border Color back to Grey

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

Upvotes: 0

Punitkumar Kulli

Reputation: 61

Try

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

Upvotes: 2

Nawaraj

Reputation: 425

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

Upvotes: 1

Vaibhav Singh

Reputation: 11

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

Upvotes: 1

ZEF

Reputation: 21

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

Upvotes: 1

Ivan Cristobal

Reputation: 333

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.

Upvotes: 0

Saurabh Mistry

Reputation: 13699

very simple :

.btn {outline: none;}

Upvotes: -1

Tsurule Vol

Reputation: 482

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

Upvotes: 3

Subodh Sharma

Reputation: 303

Try this

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

Upvotes: 9

Steffo Dimfelt

Reputation: 889

This one worked for me in Bootstrap 4:

.btn {border-color: transparent;}

Upvotes: 3

Sandy

Reputation: 673

Try Below Code

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

Upvotes: 22

Wesley Kelly

Reputation: 21

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.

Upvotes: 0

Kraigon

Reputation: 49

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!

Upvotes: 4

0x1ad2

Reputation: 8062

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

Upvotes: 3

webtechnelson

Reputation: 370

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

Upvotes: 1

Chang

Reputation: 1716

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

Upvotes: 63

xhunter

Reputation: 49

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

Upvotes: 3

Gaby Evangelista

Reputation: 41

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>

Upvotes: 4

Alex LH

Reputation: 41

a:focus {
  outline: none;
}

this works for me on BS3

Upvotes: 2

bootstrap button shows blue outline when clicked

Answers (30)

Related Questions