Как удалить синий "выделенный" контур на кнопках?

Ответ 1

Это поведение по умолчанию для каждого браузера; ваш браузер, похоже, Safari, в Google Chrome он оранжевый цвет!

Используйте это, чтобы удалить этот эффект:

button {
  outline: none; // this one
}

Ответ 2

Вы можете удалить синий контур, используя outline: none.

Тем не менее, я бы очень рекомендовал стилизовать ваши фокусные состояния. Это поможет пользователям с ослабленным зрением.

Отъезд: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible. Подробнее здесь: http://outlinenone.com

Ответ 3

Это проблема в семье Chrome и была там навсегда.

Возникла ошибка https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Это может быть показано здесь: https://codepen.io/anon/pen/Jedvwj, как только вы добавляете границу к чему-либо похожему на кнопку (скажем, например, в тег был добавлен role = "button") Chrome портится и устанавливает состояние фокуса, когда вы нажимаете с помощью мышь. Вы должны увидеть этот контур только на клавиатуре.

Я настоятельно рекомендую использовать это исправление: https://github.com/wicg/focus-visible.

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

npm install --save focus-visible

Добавьте скрипт в свой HTML:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

или импортируйте в основной файл ввода, если используете веб-пакет или что-то подобное:

import 'focus-visible/dist/focus-visible.min';

затем поместите это в свой файл CSS:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Вы можете просто установить:

button:focus {outline:0;}

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

Ответ 4

Вы можете удалить это, добавив! важно для вашего плана.

button{
 outline: none !important;
}