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 per

Answer 1

This will remove it - short and clean:

.btn {
    outline: none !important;
}

Answer 2

you can put this tag into your html.

<button class='btn btn-primary' onfocus='this.blur'>
     Button Text
</button>

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.

Answer 3

Search and replace

outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;

Replace to

outline: 0;

Answer 4

With scss:

$btn-focus-box-shadow: none!important;

Answer 5

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

Answer 6

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.