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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt a class  btn  gt  elements   button btn focus     border-width  0

User · Answer

I just had the same issue and the following code worked for me    x000D   x000D   btn active   btn focus   btn active focus   btn active focus   x000D      outline  none  important  x000D    x000D   x000D   btn   x000D    margin 32px  x000D    x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   x000D   x000D   x000D   x000D   lt button type  button  class  btn btn-default  gt Button lt  button gt  x000D   x000D   x000D    Hoping it will help

User · Answer

Sometimes  outline  0  didn t solve the problem and we can try  box-shadow  none

User · Answer

Try the below   bootstrap-select  dropdown-toggle focus               outline  0  important

User · Answer

very simple      btn  outline  none

User · Answer

Try Below Code   button active    button active   button focus    button focus   button hover    button hover      border none  important      outline none  important

User · Answer

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 gt  btn-primary dropdown-toggle focus   box-shadow  none

User · Answer

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

User · Answer

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

User · Answer

This one worked for me in Bootstrap 4     btn  border-color  transparent

User · Answer

Change the Border Color back to Grey    btn focus   btn active   border  1px solid  ced4da  important

User · Answer

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

User · Answer

a focus     outline  none      this works for me on BS3

User · Answer

Keep in mind  if you re button is inside of an anchor like    lt a href  some link  gt       lt button class  btn  gt Button lt  button gt   lt  a gt    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

User · Answer

The SCSS way for all elements  not only buttons    body              amp  focus   amp  focus       amp  active   amp  active         outline  transparent none 0  important        box-shadow  0 0 0 0 rgba 0 123 255 0   important        -webkit-box-shadow  none  important

User · Answer

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

User · Answer

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    lt button class  btn btn-primary shadow-none  gt Example button lt  button gt

User · Answer

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

User · Answer

Try this    btn       box-shadow  none      outline  none

User · Answer

this will solve button with a text  button only a icon or a button is a link     lt  --1  button with a text -- gt    lt button type  button  class  btn btn-success  id  newWord  gt Save lt  button gt     lt  --2  button only with a close icon -- gt    lt button type  button  class  close  gt  lt  button gt     lt  --3  button is a link -- gt    lt a class  btn btn-success btn-xs  href     gt Save lt  a gt     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

User · Answer

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

User · Answer

Try   btn-primary focus      box-shadow  none  important

User · Answer

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

User · Answer

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

User · Answer

This may help if someone still has this question unresolved    x000D   x000D   function     x000D       button   on  click   function     x000D          action   html  button was clicked    x000D      console log  the button was clicked    x000D        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    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt  -- this button has default style -- gt  x000D   lt button gt Action lt  button gt  x000D   lt  -- this button is clear of style -- gt  x000D   lt button class  btn-clear  gt Action lt  button gt  x000D   x000D   lt label id  action  gt  lt  label gt  x000D   x000D   x000D

User · Answer

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

[css] bootstrap button shows blue outline when clicked

Examples related to css

Examples related to twitter-bootstrap