Кнопка завантаження показує синій контур при натисканні на нього

Я додав це, але все-таки синій контур з’являється при натисканні кнопки.

.btn:focus {
  outline: none;
}

як видалити цю некрасиву штучку?

Можливо, ваші властивості будуть переохоплені. Спробуйте приєднати !importantдо свого коду разом із: active.

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

Також додайте поле-тінь, оскільки в іншому випадку ви все одно побачите тінь навколо кнопки.

Хоча це не є хорошою практикою використання! Важливо, я пропоную вам скористатися більш конкретним класом, а потім спробувати застосувати css із використанням! Важливо ...

В останній версії Bootstrap я виявив, що видалення контуру не працює. І я мушу додати це, тому що є також тінь-бокс:

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

Є вбудований клас завантаження 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);: фокус, я вирішив свою проблему

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

Навіть після вилучення контуру з кнопки, встановивши її значення 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;
}

Це може допомогти, якщо хтось все ще не вирішив це питання.

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

Ось моє рішення 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";

Завантажувальна програма vars має прапор "! 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;

Найперший варіант має більше пріоритету, ніж другий. Те саме стосується решти станів та випадків. Сподіваюся, це допоможе вам.

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

Череє

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

Я використовую завантажувальний 4, ви можете використовувати контур і тінь.

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

Або якщо кнопка знаходиться всередині елемента, подібного до div, без заземлення, достатньо тіні.

#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, просто видаляйте клас "фокус" щоразу, коли елемент клацається.

$(".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;
    }
  }
}