Bootstrap button - remove outline on Chrome OS X

Question

I am looking to achieve this  http   getbootstrap com javascript  popovers-examples - scroll to the  live Demo  and hit the red popover button  in Chrome on OS X     It s perfect beautiful  Now go here  the problem child   http   yoyo io javascript  popovers - it outlines blue  aaaargh   If you inspect you will see a litany of CSS efforts from me to remove this  It looks correct in Safari and Firefox but a no go in Chrome   Anyone - what am I overlooking    Many thanks in advance

User · Answer

For any googlers like me  where     btn focus       outline  none      still didn t work in Google Chrome  the following should completely remove any button glow    btn focus  btn active focus  btn active focus   btn focus  btn active focus  btn active focus       outline  none

User · Answer

This will remove it - short and clean    btn       outline  none  important

User · Answer

If someone is using bootstrap sass note the code is on the  reboot scss file like this   button focus     outline  1px dotted    outline  5px auto -webkit-focus-ring-color      So if you want to keep the  reboot file I guess feel free to override with plain css instead of trying to look for a variable to change

User · Answer

you can put this tag into your html    lt button class  btn btn-primary  onfocus  this blur  gt       Button Text  lt  button gt    I used on focus because onclick still displayed the glow for a microsecond and made a horrible looking flash in terms of using it  This seemed to get rid after all the css methods failed

User · Answer

Here s the solution    x000D   x000D   sec-one padding  15px 0   x000D  p text-align  center   x000D     x000D    Change the color to any color you want  x000D    or set to none if you don t any outline at all  x000D     x000D    focus not a   x000D      outline  2px solid  f90d0e  important  x000D      box-shadow  none  important  x000D    x000D   lt  doctype html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt section id  sec-one  gt  x000D   lt div class  container  gt  x000D       lt div class  row  gt  x000D         lt div class  col  gt  x000D           lt form gt  x000D             lt fieldset class  form-group  gt  x000D               lt input type  text  class  form-control  placeholder  Full Name  required gt  x000D             lt  fieldset gt  x000D              lt fieldset class  form-group  gt  x000D               lt input type  email  class  form-control  placeholder  Email Address  required gt  x000D             lt  fieldset gt  x000D             lt fieldset class  form-group  gt  x000D               lt input type  submit  class  btn btn-default  value  Sign Up  gt  x000D             lt  fieldset gt  x000D             lt  form gt  x000D         lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt  section gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    This works 100  hope it helps you

User · Answer

That CSS goes from this file  tab-focus less  in mixins folder  it could be difficult to find  because mixins are not shown at chrome dev-tools   So you should edit this      WebKit-style focus    tab-focus              Default       outline  thin dotted           WebKit       outline  5px auto -webkit-focus-ring-color        outline-offset  -2px

User · Answer

In the mixins of the Bootstrap sources Sass files  remove all  border references  not in the outline variant     mixin button-variant  color   background   border     active-background  darken  background  10       active-border  darken  border  12          color   color    background-color   background      border-color   border     include box-shadow  btn-box-shadow               Or simply code you own  customButton scss mixin

User · Answer

It worked for my bootstrap button after a such stress   btn focus   btn active focus   btn active focus   btn focus   btn active focus   btn active focus       outline  none important      box-shadow  none

User · Answer

Search and replace  outline  thin dotted  outline  5px auto -webkit-focus-ring-color    Replace to  outline  0

User · Answer

If the above answers still do not work  add this   button focus      outline  none important      box-shadow none

User · Answer

With scss     btn-focus-box-shadow  none important

User · Answer

btn active or  btn focus alone cannot override Bootstrap s styles  For default theme    btn active focus   btn active focus   btn focus   btn active focus    btn active focus   btn focus         outline  none

User · Answer

The simplest solution is  Create a CSS file and type this    btn focus   btn active focus   btn active focus       box-shadow  none  important

User · Answer

btn focus   btn active focus   btn active focus      outline none      box-shadow none      This should remove outline and box shadow

User · Answer

In bootstrap 4 the outline is no longer used  but the box-shadow  If it is your case  just do the following    btn focus       box-shadow  none

User · Answer

I see  btn focus has an outline on it    btn focus     outline  thin dotted    outline  5px auto -webkit-focus-ring-color    outline-offset  -2px      Try changing this to    btn focus     outline  none  important      Basically  look for any instances of outline on  focused elements     that s what s causing it   Update - For Bootstrap v4    btn focus     box-shadow  none

[google-chrome] Bootstrap button - remove outline on Chrome OS X

Examples related to google-chrome

Examples related to button

Examples related to focus

Examples related to twitter-bootstrap-3

Examples related to outline