Удалить синюю рамку из кнопки CSS в пользовательском стиле в Chrome

подождите! Этому уродливому контуру есть причина!

прежде чем удалить этот уродливый синий контур, вы можете взять доступность на рассмотрение. По умолчанию этот синий контур размещается на фокусируемых элементах. Это позволяет пользователям с проблемами доступности фокусировать эту кнопку, вкладывая в нее вкладки. Некоторые пользователи не имеют двигательных навыков для использования мыши и должны использовать только клавиатуру (или другое устройство ввода) для компьютера взаимодействие. Когда вы удаляете синий контур, больше нет визуального индикатора того, какой элемент сфокусирован. Если вы собираетесь удалить синий контур, вы должны замените его другим типом визуальной индикации того, что кнопка сфокусирована.

возможное решение: затемнить кнопки при фокусировке

для приведенных ниже примеров синий контур Chrome был сначала удален с помощью button:focus { outline:0 !important; }

вот ваши основные кнопки загрузки как они выглядят обычно:

вот кнопки, когда они получают фокус:

здесь кнопки при нажатии:

Как вы можете видеть, кнопки немного темнее, когда они получают фокус. Лично я бы рекомендовал сделать сфокусированные кнопки еще темнее, чтобы была очень заметная разница между сфокусированным состоянием и нормальным состоянием кнопки.

это не только для инвалидов пользователи

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

Я просто удаляю контур из всех тегов на странице, выбрав все и применяя контур: нет ко всему:)

*:focus {outline:none}

Как упоминалось в bagofcole, вам может потребоваться добавить !важно также, чтобы стиль выглядел так:

*:focus {outline:none !important}

Не забудьте !important объявление, для лучшего результата

button:focus {outline:0 !important;}

правило, которое имеет !важное свойство всегда будет применяться независимо от того, где это правило появляется в документ CSS.

в моем случае этой проблемы я должен был указать box-shadow: none

button:focus {
  text-decoration: none;
  outline:none;
  border: none;
  box-shadow: none;
}

добавьте это в файл CSS.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

используйте либо это:

:active {
    outline:none;
}

или это если это не сработает:

:active {
   outline:none !important;
}

это работает для меня (FF и Chrome, по крайней мере). Вместо ориентации на :focus состояние, просто цель :active состояние, и это удалит эстетически навязчивую подсветку в вашем браузере, когда пользователь нажимает ссылку. Но он все равно сохранит состояния фокуса, когда пользователь с ограниченными возможностями вкладок или shift-вкладок через страницу. Обе стороны счастливы. :)

для тех, кто использует Bootstrap и имеет эту проблему, они используют :active:focus, а также просто: active и: focus, поэтому вам понадобится:

element:active:focus {
    outline: 0;
}

надеюсь, спас кого-то некоторое время, выясняя, что один, ударился головой немного удивляясь, почему такая простая вещь не работает.

Это то, что сработало для меня:

button:focus {
    box-shadow:none;
}

попробуйте этот код для всех элементов, у которых есть проблема с синей границей

*{
outline: none;
}

или

*{
outline-style: none;
}

Если вы хотите удалить тот же эффект на входе, Вы можете добавить следующий код, а также кнопку.

input:focus {outline:0;}

проблемы:

используйте этот:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

результат:

пока все современные браузеры не начнут поддерживать css-selector :фокус-видны,
самый простой и, возможно, лучший способ сохранить доступность это удалить этот сложный фокус только для пользователей мыши и сохранить для пользователей клавиатуры:

1.Используйте этот крошечный polyfill (около 10kb):https://github.com/WICG/focus-visible
2.Добавьте следующий код где-нибудь в css:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

браузер-поддержка css4-селектор: фокус-видимый прямо сейчас очень слаб:
https://caniuse.com/#search=focus-visible

удаление outline ужасно для доступности! В идеале кольцо фокусировки отображается только тогда, когда пользователь намерен использовать клавиатуру.

использовать :фокус-видны. В настоящее время это предложение W3C для стиля клавиатуры только фокус с помощью CSS. Пока основные браузеры не поддерживают его, вы можете использовать этот надежный polyfill.

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Я также написал более подробный в должности на всякий случай вам нужна дополнительная информация.

просто писать outline:none;. Нет необходимости использовать псевдоэлемент focus