Все сталкиваются с этой проблемой каждый раз, когда создают веб-страницу с помощью кнопки… Странный и неуместный синий контур вокруг кнопки после ее нажатия [см. Ниже]

Один из подходов - удалить контур с помощью css:

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

Если вы посмотрите в Интернете, есть много чрезмерно сложных решений, которые определяют, выделяется ли кнопка по щелчку или с помощью tab нажатия клавиатуры, и соответственно корректируют css / classname. Есть также некоторые экспериментальные функции CSS, которые пытаются решить эту проблему, но они пока несовместимы с большинством браузеров.

Простое решение действительно существует! Мы можем удалить фокус, вызвав функцию blur () на кнопке после события отправки 🎉

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