Усі кнопки мають виділення навколо них після того, як я натискаю на них. Це в Chrome.

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Я використовую Bootstrap з темою, але я впевнений, що це не так: я це помічав раніше в іншому проекті.

Він проходить, якщо <a>замість цього я використовую тег <button>. Чому? Якби я хотів використати, <button>як би я змусив його піти?

Я знайшов це питання на іншій сторінці, і переосмислення стилю фокусування кнопок працювало на мене. Ця проблема може стосуватися MacOS із Chrome.

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

Зауважте, що це має наслідки для доступності і не рекомендується, поки у вас не буде хорошого послідовного стану фокусування для ваших кнопок і входів. Відповідно до коментарів нижче, там є користувачі, які не можуть використовувати миші.

Ви хочете чогось типу:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Метод .blur () правильно видаляє виділення фокусу і не псує стилі Bootstraps.

я розумію, що основна увага буде вперше застосовано після onMouseDownподії, тому виклик e.preventDefault()в onMouseDownможе бути чистим рішенням в залежності від ваших потреб. Це, безумовно, зручне рішення для доступності, але, очевидно, воно коригує поведінку клацань миші, що може бути не сумісно з вашим веб-проектом.

В даний час я використовую це рішення (в рамках react-bootstrapпроекту), і я не отримую мерехтіння фокусу або збереженого фокусування кнопок після клацання, але я все одно в змозі помітити фокус і візуально візуалізувати фокус тих же кнопок.

Не можу повірити, що це ще ніхто не опублікував.

Використовуйте мітку замість кнопки.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Скрипка

Хоча просто видалити контур для всіх сфокусованих кнопок (як у користувачі1933897 відповіді ), але це рішення погано з точки зору доступності (наприклад, див Зупинити Мессінг з браузером за замовчуванням Фокуса контур )

З іншого боку, напевно неможливо переконати браузер припинити стилізувати натиснуту кнопку як зосереджену, якщо він вважає, що вона фокусується після того, як ви натиснули на неї (я дивлюся на вас, Chrome на OS X).

Отже, що ми можемо зробити? Пару варіантів приходять мені на думку.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Ви доручаєте веб-переглядачу видалити фокус навколо будь-якої кнопки відразу після натискання кнопки. Використовуючи mouseupзамість того, що clickми зберігаємо поведінку за замовчуванням для взаємодій на основі клавіатури (mouseup не спрацьовує).

2) CSS: .btn:hover { outline: 0 !important }

Тут ви вимикаєте контур лише для наближених кнопок. Очевидно, що це не ідеально, але може бути достатньо в деяких ситуаціях.

Це працювало для мене. Я створив спеціальний клас, який переосмислює необхідний CSS.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-Webkit-box-тінь буде працювати для браузерів Chrome і safari.

Це працює для мене, інше рішення не згадується. Просто киньте його у події клацання ...

$(this).trigger("blur");

Або зателефонуйте до нього з іншої події / методу ...

$(".btn_name").trigger("blur");

Якщо ви використовуєте правило :focus { outline: none; }для видалення контурів, посилання або елемент керування буде фокусируватися, але без вказання фокусу для користувачів клавіатури. Способи видалення такого типу з JS, як onfocus="blur()"і раніше, ще гірші і призводять до того, що користувачі клавіатури не зможуть взаємодіяти з керуванням.

Хаки, які ви можете використовувати, такі як ОК , включає додавання :focus { outline: none; }правил під час взаємодії користувачів з мишею та видалення їх знову, якщо виявлено взаємодію клавіатури. Ліндсі Еванс зробила ліб для цього: https://github.com/lindsayevans/outline.js

Але я вважаю за краще встановити клас на html або тег body. І мати контроль у файлі CSS, коли це використовувати.

Наприклад (вбудовані обробники подій призначені лише для демонстрації):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Я поклав перемикач: http://codepen.io/snobojohan/pen/RWXXmp

Але будьте обережні, що існують проблеми з продуктивністю. Це змушує перефарбовувати кожен раз, коли користувач перемикається між мишею та клавіатурою. Докладніше про уникнення непотрібних фарб http://www.html5rocks.com/en/tutorials/speed/unne необходимо-paints/

Я помітив те саме, і хоча це мене справді дратує, я вважаю, що немає правильного способу впоратися з цим.

Я б рекомендував проти всіх інших рішень, наданих через те, що вони повністю знищують доступність кнопки, тому тепер, коли ви натискаєте кнопку, ви не отримаєте очікуваного фокусу.

Цього слід уникати!

.btn:focus {
  outline: none;
}

Я знаходжу рішення. коли ми фокусуємось, завантажувач використовує box-shadow, тому ми просто відключаємо його (недостатньо репутації, не можна завантажувати зображення :().

Додаю

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

це працює.

ВАРІАНТ 1: Використовуйте :focus-visibleпсевдоклас

:focus-visibleПсевдо-клас може бути використаний , щоб вбити непривабливі обриси і фокус кільця на кнопках і різних елементах для користувачів , що не пливуть з допомогою клавіатури (тобто, з допомогою дотику або мишей).

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Попередження: Станом на 2020 рік, :focus-visibleпсевдоклас широко не підтримується в браузерах . Однак поліфіл дуже простий у використанні; див. інструкції нижче.

ВАРІАНТ 2: Використовуйте .focus-visibleполіфіл

Це рішення використовує звичайний клас CSS замість згаданого вище псевдокласу та має широку підтримку браузера, оскільки це офіційний поліфайл на основі Javascript .

Крок 1: Додайте залежності Javascript на вашу сторінку HTML

Примітка: видима для фокусу поліфайла потрібна додаткова поліфаз для декількох старих браузерів, які не підтримують classList :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

Крок 2. Додайте до таблиці стилів наступний CSS

Далі наведена модифікована версія рішення CSS, більш детально задокументована вище.

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Крок 3 (необов’язково): використовуйте клас "видимий фокус", де це необхідно

Якщо у вас є якісь елементи, де ви насправді хочете показати кільце фокусування, коли хтось клацає або використовує дотик, просто додайте focus-visibleклас до елемента DOM.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Ресурс:

• https://css-tricks.com/keyboard-only-focus-styles/

Демонстрація:

• https://wicg.github.io/focus-visible/demo/

Якщо вищезгадане не працює для вас, спробуйте:

.btn: фокус {контур: немає; поле-тінь: немає; межа: 2px суцільний прозорий;}

Як вказував user1933897, це може бути специфічно для MacOS із Chrome.

Пізно, але хто це знає, може комусь допомогти. CSS виглядатиме так:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML виглядатиме так:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

Таким чином ви можете зберегти btn та пов'язані з ним поведінки.

Про це я згадував у коментарі вище, але варто окреслити його як окрему відповідь для ясності. Поки вам не потрібно ніколи зосереджуватися на кнопці, ви можете використовувати подію фокусування, щоб видалити її, перш ніж вона зможе застосувати будь-які ефекти CSS:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Це дозволяє уникнути мерехтіння, яке можна побачити при використанні події клацання. Це обмежує інтерфейс, і ви не зможете натиснути кнопку, але це не проблема у всіх програмах.

Стиль

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

Використання

<button class="btn btn-primary not-focusable">My Button</button>

Спробуйте це рішення для видалення рамки навколо кнопки. Додайте цей код у css.

Спробуйте

button:focus{
outline:0px;
}

Якщо це не працює, то використовуйте нижче.

button:focus{
 outline:none !important;
 }

Для людей, які хочуть зробити чистий css спосіб зробити це:

:focus:not(:focus-visible) { outline: none }

Це також може працювати для посилань тощо, і бонус, він зберігає можливості клавіатури. Нарешті, вона ігнорується браузерами, які не підтримують: фокус-видимість

Ми страждали від подібної проблеми і помітили, що Bootstrap 3 не має проблеми на своїх вкладках (у Chrome). Схоже, вони використовують стиль контуру, який дозволяє браузеру вирішувати, що найкраще робити, а Chrome, здається, робить те, що ви хочете: показуйте контур у фокусі, якщо ви просто не натиснули елемент.

Підтримку outline-styleважко знайти, оскільки браузер вирішує, що це означає. Найкраще зареєструватися в декількох браузерах і мати правило резервного копіювання.

Ще одне можливе рішення - додати клас за допомогою слухача Javascript, коли користувач натискає кнопку, а потім видалити цей клас на фокус з іншим слухачем. Це підтримує доступність (видимі вкладки), а також запобігає химерній поведінці Chrome щодо розгляду кнопки, орієнтованої при натисканні.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Повний приклад тут: https://jsfiddle.net/4bbb37fh/

Це робота, сподіваюся, допоможу тобі

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

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

це видаляє контур при натисканні, але зберігає фокус при вкладці (для a11y)

Це працює найкраще

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

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

цей контур: жоден не працюватиме як для кнопки, так і для тегу

Додайте це в CSS:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Я знайшов рішення просто додати нижче рядка у свій код css.

button:focus { outline: none }

У мене саме ця проблема була в MacOS та Chrome під час використання кнопки для запуску події "переходу". Якщо хтось, хто читає це, вже використовує слухач подій, ви можете вирішити це, зателефонувавши .blur()після своїх дій.

Приклад:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Хоча якщо ви вже не використовуєте слухача подій, додавання одного, щоб вирішити це, може додати непотрібні накладні витрати, а рішення стилізації, як попередні відповіді, краще.

Ви можете встановити tabIndex="-1". Він змусить браузер пропустити цю кнопку, коли ви переймете TAB через фокусирувані елементи керування.

Інші "виправлення", запропоновані тут, видаляють лише контури фокусу, але залишають кнопки помітними. Однак, з точки зору зручності використання, ви вже видалили світіння, так що ваш користувач не дізнається, на що орієнтована на даний момент кнопка, в будь-якому випадку.

З іншого боку, перетворення кнопки, яку не можна розмістити, має значення для доступності.

Я використовую його, щоб видалити контур фокусування з кнопки "X", у bootstrap modalякій в будь- якому разі є дублікат кнопки "Закрити" внизу, тому моє рішення не впливає на доступність.

Якщо ви користуєтеся веб-браузером (і, можливо, веб-переглядачем, сумісним з префіксом постачальника webkit), цей контур належить до -webkit-focus-ringпсевдокласу кнопки . Просто встановіть це outlineна none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome - це такий веб-браузер, і цей ефект трапляється і в Linux (не лише справа macOS, хоча деякі стилі Chrome - це лише macOS)

У мене була така ж проблема, <a>коли я працював як кнопка, і я виявив, що мені не вистачає способу вирішення, додавши attr, що приводить type="button"мене до нормальної поведінки.

<a type="button" class="btn btn-primary">Release Me!</a>

безпосередньо в тезі html (у сценарії, коли ви можете залишити тему завантаження на іншому місці вашого дизайну) ..

приклади, щоб спробувати ..

<button style="border: transparent;">

<button style="border: 1px solid black;">

..ект,. залежно від бажаного ефекту.