Все мои кнопки выделяются вокруг них после того, как я нажимаю на них. Это в Хроме.

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

скрипка

Хотя это легко только контур вынимаются для всех сосредоточены кнопок (как в user1933897 игрового ответа ), но это решение плохо с точки зрения доступности (например, см Остановить Мессинг с браузером по умолчанию Фокуса контур )

С другой стороны, вероятно, невозможно убедить ваш браузер прекратить стилизовать вашу нажатую кнопку как выделенную, если она думает, что она сфокусирована после того, как вы нажали на нее (я смотрю на вас, 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-shadow будет работать для браузеров 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/unneeded-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

Если у вас есть какие-либо элементы, для которых вы действительно хотите показать кольцо фокусировки, когда кто-то щелкает или использует касание, просто добавьте 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: focus {контур: нет; box-shadow: нет; граница: 2px прозрачная;}

Как указал user1933897, это может быть характерно для MacOS с Chrome.

Поздно, но кто знает, может кому-то помочь. CSS будет выглядеть так:

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

HTML будет выглядеть так:

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

Таким образом, вы можете сохранить btn и связанные с ним поведения.

Я упоминал об этом в комментарии выше, но для ясности стоит перечислить его как отдельный ответ. До тех пор, пока вам вообще не нужно фокусироваться на кнопке, вы можете использовать событие focus, чтобы удалить ее, прежде чем она сможет применить какие-либо CSS-эффекты:

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

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

Стиль

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

Это также может работать для ссылки и так далее, и бонус, он сохраняет доступность клавиатуры. Наконец, это игнорируется браузерами, которые не поддерживают: focus-visible

Мы столкнулись с подобной проблемой и заметили, что 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-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;">

..ect ,. в зависимости от желаемого эффекта.