кнопка начальной загрузки показывает синий контур при нажатии

Я добавил это, но синий контур по-прежнему появляется при нажатии кнопки.

.btn:focus {
  outline: none;
}

как удалить эту уродливую штуку?

Возможно, ваши свойства переопределяются. Попробуйте присоединиться !importantк вашему коду вместе с: active.

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

Также добавьте box-shadow, иначе вы все равно будете видеть тень вокруг кнопки.

Хотя это не очень хорошая практика! Important, я предлагаю вам использовать более конкретный класс, а затем попробовать применить CSS с использованием! Important ...

В последней версии Bootstrap я обнаружил, что удаление самого контура не работает. И я должен добавить это, потому что есть тень блока:

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

Есть встроенный класс boostrap shadow-noneдля отключения box-shadow(не outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Это удаляет тень кнопки:

<button class='btn btn-primary shadow-none'>Example button</button>

Попробуйте код ниже

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

Это происходило со мной в Chrome (но не в Firefox). Я обнаружил, что outlineсвойство было установлено Bootstrap как outline: 5px auto -webkit-focus-ring-color;. Решено путем переопределения outlineсвойства позже в моем пользовательском CSS следующим образом:

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

это решит кнопку с текстом, кнопка - только значок или кнопка - это ссылка:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



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

если вы добавите border:none !important;

{
    border:none !important;
    outline:none !important;
}

тогда кнопка станет меньше при нажатии.

Попробуй это

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

В Bootstrap 4 они используют box-shadow: 0 0 0 0px rgba(0,123,255,0);on: focus, я решил свою проблему с помощью

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

Это может помочь, если у кого-то все еще есть нерешенный вопрос.

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

Даже после удаления контура с кнопки, установив для него значение 0, при нажатии на кнопку все еще наблюдается забавное поведение, ее размер немного уменьшается. Итак, я нашел оптимальное решение:

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

Надеюсь это поможет...

Вам нужно использовать правильное размещение, а затем применить к нему стили.

• Щелкните правой кнопкой мыши по кнопке и найдите точное вложение классов для него, используя (Проверить элемент с помощью firebug для firefox), (проверить элемент на наличие хрома).

• Добавьте стиля всему классу. Только тогда это сработает

Я нашел это весьма полезным в моем случае после нажатия кнопки.

$('#buttonId').blur();

Я решил просто убрать ширину границы :focus. Это убирает некрасивое пространство между контуром и закругленными углами кнопки. По какой-то причине эта проблема возникает только с фактическими элементами кнопки, а не с <a class="btn">элементами.

button.btn:focus {
  border-width: 0;
}

Вот мое решение Boostrap 4 для удаления контура кнопки

/*
* Boostrap 4
* Remove blue outline from button
*/

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

У меня была такая же проблема, и у меня сработал следующий код:

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

Надеюсь, это поможет!

Фактически в бутстрапе определены все переменные для всех случаев. В вашем случае вам просто нужно переопределить переменную по умолчанию '$ input-btn-focus-box-shadow' из файла '_variables.scss'. Примерно так: $input-btn-focus-box-shadow: none; обратите внимание, что вам нужно переопределить эту переменную в вашем собственном файле _yourCusomVarsFile.scss. И этот файл следует импортировать в проект в первом порядке, а затем выполнить загрузку следующим образом:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

Параметры начальной загрузки идут с флагом '! Default'.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Итак, в вашем файле вы переопределите значения по умолчанию. Вот иллюстрация:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Самый первый var имеет больший приоритет, чем второй. То же самое для остальных состояний и случаев. Надеюсь, это поможет вам.

Вот файл _variable.scss из репо, где вы можете найти все значения инициалов из начальной загрузки: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

это работает для меня на BS3

Этот работал у меня в Bootstrap 4:

.btn {border-color: transparent;}

Пытаться

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

Имейте в виду, если ваша кнопка находится внутри якоря, например:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

Добавление стиля к самой кнопке может быть недостаточно, вам может потребоваться добавить a:focus, a:active { outline: none }правила CSS, где это необходимо (это сработало для меня).

Попробуйте следующее

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

Иногда {outline: 0}проблема не решалась и можно попробовать{box-shadow: none;}

Я использую bootstrap 4, вы можете использовать контур и тень коробки.

#buttonId {
    box-shadow: none;
    outline: none;
}

Или, если кнопка находится внутри элемента, такого как div, без фона, достаточно box-shadow.

#buttonId {
     box-shadow: none;
}

Пример: https://codepen.io/techednelson/pen/XRwgRB

Если вы используете версию 4.3 или выше, ваш код не будет работать должным образом. Это то, что я использовал. У меня это сработало.

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

Вместо того, чтобы нацеливаться на класс кнопки ( .btn ), здесь я нацелен на сам элемент кнопки , и он работает для меня.

        button:focus {
          outline:none !important;
          box-shadow:none !important;
        }

И может использовать shadow-noneкласс для поля ввода

Вот метод без использования CSS. Используя JQuery, просто удаляйте класс «focus» при каждом щелчке по элементу.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

Этот метод может привести к тому, что граница начнет мигать, а затем ненадолго откатится, что, на мой взгляд, неплохо (это выглядит как часть ответа при нажатии кнопки).

Я использовал .mousemove () потому, что .click () и .mouseup () оказались неэффективными.

Изменение этих значений сработало для меня. Я нашел его, посмотрев на Инструменты разработчика 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*/;
}

При этом сохраняется и тень кнопки, изменяется только цвет кнопки при нажатии.

Замените точные операторы начальной загрузки:

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

Измените цвет границы обратно на серый

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

Способ SCSS для всех элементов (не только кнопок):

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