Кнопка Bootstrap - удаление контура на Chrome OS X

Я хочу добиться этого: http://getbootstrap.com/javascript/#popovers-examples - прокрутите до "живой демо" и нажмите красную кнопку popover, в Chrome на OS X.... Это прекрасный красивый

Теперь идите (проблема с дочерним элементом): http://yoyo.io/javascript/#popovers - это очертания синего, aaaargh.

Если вы проверите, вы увидите от меня множество усилий CSS, чтобы удалить это! Он выглядит корректно в Safari и Firefox, но не в Chrome!

Кто-нибудь - что я пропускаю?

Большое спасибо заранее!

Ответ 1

Я вижу, что .btn:focus имеет на нем outline:

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Попробуйте изменить это на:

.btn:focus {
  outline: none;
}

В принципе, найдите любые экземпляры outline на :focus ed элементах - то, что вызывает его.

Ответ 2

Для любых гуглеров, подобных мне, где..

.btn:focus {
    outline: none;
}

все еще не работает в Google Chrome, следующее должно полностью удалить любую свечение кнопок.

.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
}

Ответ 3

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

Это должно удалить контур и тень окна

Ответ 4

.btn.active или .btn.focus самостоятельно не может переопределять стили Bootstrap. Для темы по умолчанию:

.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus {
      outline: none;
}

Ответ 5

Это удалит его - короткое и чистое:

.btn {
    outline: none !important;
}

Ответ 6

Поиск и замена

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

Заменить на

outline: 0;

Ответ 7

вы можете поместить этот тег в свой html.

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

Я использовал фокус, потому что onclick все еще отображал свечение на микросекунду и сделал ужасную вспышку с точки зрения ее использования. Казалось, что это избавилось после того, как все методы css потерпели неудачу.

Ответ 8

Этот CSS идет из этого файла "tab-focus.less" в папке mixins (его может быть сложно найти, потому что mixins не отображаются в chrome dev-tools). Поэтому вы должны отредактировать это:

// WebKit-style focus 

.tab-focus() {
      // Default
      outline: thin dotted;
      // WebKit
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

Ответ 9

В миксах файлов Bootstrap Sass удалите все ссылки $border (не в варианте схемы).

@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);
  [...]
}

Или просто введите код _customButton.scss mixin.

Ответ 10

В бутстрапе 4 контур больше не используется, но тень окна. Если это ваш случай, просто выполните следующие действия:

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