Как убрать focus при active
Как убрать фокус с кнопок при нажатии
Все мои кнопки выделяются вокруг них после того, как я нажимаю на них. Это в Хроме.
Я использую Bootstrap с темой, но я уверен, что это не так: я заметил это раньше в другом проекте.
Я нашел эти вопросы и ответы на другой странице, и переопределение стиля фокуса кнопки сработало для меня. Эта проблема может быть характерна для MacOS с Chrome.
Обратите внимание, что это имеет значение для доступности и не рекомендуется, пока у вас не будет хорошего согласованного состояния фокуса для ваших кнопок и входов. Согласно комментариям ниже, есть пользователи, которые не могут использовать мышей.
Вы хотите что-то вроде:
я понимаю, что основное внимание будет впервые применено после onMouseDown события, поэтому вызов e.preventDefault() в onMouseDown может быть чистым решением в зависимости от ваших потребностей. Это, безусловно, удобное решение, но, очевидно, оно регулирует поведение щелчков мыши, которые могут быть несовместимы с вашим веб-проектом.
В настоящее время я использую это решение (в рамках react-bootstrap проекта), и я не получаю мерцание фокуса или удержание фокуса кнопок после щелчка, но я все еще могу прокрутить фокус и визуально визуализировать фокус тех же кнопок.
Не могу поверить, что никто еще не опубликовал это.
Используйте метку вместо кнопки.
Хотя это легко только контур вынимаются для всех сосредоточены кнопок (как в user1933897 игрового ответа ), но это решение плохо с точки зрения доступности (например, см Остановить Мессинг с браузером по умолчанию Фокуса контур )
С другой стороны, вероятно, невозможно убедить ваш браузер прекратить стилизовать вашу нажатую кнопку как выделенную, если она думает, что она сфокусирована после того, как вы нажали на нее (я смотрю на вас, Chrome на OS X).
Так что мы можем сделать? Несколько вариантов приходят мне на ум.
Вы указываете своему браузеру, что нужно убрать фокус с любой кнопки сразу после ее нажатия. Используя mouseup вместо этого, click мы сохраняем поведение по умолчанию для взаимодействий на основе клавиатуры ( mouseup не вызывается клавиатурой).
Это сработало для меня. Я создал собственный класс, который переопределяет необходимый CSS.
-Webkit-box-shadow будет работать для браузеров Chrome и Safari.
Но я бы предпочел установить класс по тегу html или body. И иметь контроль в файле CSS о том, когда использовать это.
Например (встроенные обработчики событий только для демонстрационных целей):
Как убрать focus при active
Всегда используйте :hover вместе с :focus
Мне очень понравилась Пашина статья о псевдоклассах. =) Специально по такому случаю в закромах была недавняя заметка с 456bereastreet.
В ней рассказывается о том, что может повлечь за собой игнорирование псевдокласса :focus.
Мы рассмотрим типы проблем и в итоге узнаем что делать, чтобы избежать их.
Качественная разработка сайта любой сложности.
Компания ltd-studio.
Реализация правил для псевдокласса :hover без реализации :focus является наиболее частым недосмотром при проектировании стиля сайта. Серьезность проблем при таком недосмотре зависит от того, как вы определили поведение для состояния :hover.
Рассмотрим их в порядке возрастания серьезности.
1. Неряшливость
Если для :hover заданы простые правила, например, только изменение цвета текста, пренебрежение :focus не влечет за собой серьезных проблем. В этом случае при смене фокуса с помощью клавиатуры актуальный элемент просто никак не выделится.
2. Серьезные проблемы использования
Гораздо больше проблем вы получите, если зададите свойство outline равным 0 или значению none. Эта проблема сейчас набирает актуальность, т.к. сведение на нет эффекта outline довольно популярно.
В этом случае ссылки технически доступны, но это никак не подтверждено визуально. Разве что некоторые браузеры отображают в статусной строке текущее значение href сфокусированной ссылки.
3. Полная недосягаемость
Существуют методики, которые делают содержимое совершенно недоступным для пользователей устройств без поддержки мыши. В частности, когда :hover используется для раскрытия меню, и при этом не определена реакция на :focus. В этом случае меню будет недоступно, если у вас нет мышки. Epicfail.
Фокус на :focus (и :active)
Все перечисленные проблемы решаются довольно просто: там же, где вы определяете правила для :hover, укажите и :focus. Для того, чтобы Internet Explorer версий 7 и ранее распознал правила, надо дописать псевдокласс :active.
Пара слов о порядке перечисления псевдоклассов объявлении
Этот параграф — отдельная заметка. Все желающие могут ознакомиться с оригиналом статьи.
Для многих известно, что порядок объявления псевдоклассов правиле CSS имеет значение. На 456bereastreet предпочитают следующий порядок:
Этот порядок основан на нескольких статьях Эрика Мейера. Одна из них содержит довольно забавные мнемоники, я привожу их ниже на языке оригинала:
Небольшое лирическое
Если кто-то думает: «Э. а как же модульные сетки, все дела, Марк Болтон и все такое». Сетки — будут позже. Болтон. при всем к нему уважении, такое огромное количество воды мне попросту надоело переводить. Будет время, переведу. Прошу прощения за то, что не довел до конца. Но там уже какая-то художественная литература, так что сюда ее выкладывать нет никакого смысла. В ближайшем рассмотрении весь этот цикл был всего лишь рекламой его книги с одноименным названием. К сожалению, это западный мир. Бесплатно дают только стакан воды.
Автор: Дмитрий Копров
Музыкант, который однажды проснулся программистом 😉 Фронт- и бэк-энд разработчик, специалист широкого профиля. Твиттер: @dkoprov.
Расскажите друзьям
Комментарии — 25
>Так вот, по сути — это одно и то же: что такое активное состояние элемента? Это то состояние, при котором он имет фокус!
В этом случае при каждом нажатии вас будет перебрасывать на следующую ссылку. При этом стиль ссылки будет отбираться из «:focus» элемента. Тоже самое при нажатии и удерживании элемента.