:focus-visible
Псевдокласс :focus-visible применяется, в то время как элемент соответствует псевдоклассу :focus, и UA (User Agent) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.
Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).
Обратите внимание, что Firefox поддерживает аналогичную функциональность через старый псевдокласс с префиксом :-moz-focusring .
Синтаксис
Error: could not find syntax for this item
Пример
Базовый пример
В этом примере селектор :focus-visible использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью :focus .
input value="Default styles" />br /> button>Default stylesbutton>br /> input class="focus-only" value=":focus only" />br /> button class="focus-only">:focus onlybutton>br /> input class="focus-visible-only" value=":focus-visible only" />br /> button class="focus-visible-only">:focus-visible onlybutton>
input, button margin: 10px; > .focus-only:focus outline: 2px solid black; > .focus-visible-only:focus-visible outline: 4px dashed darkorange; >
Выборочное отображение индикатора фокусировки
Пользовательский элемент управления, такой как кнопка настраиваемого элемента, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как .
custom-button tabindex="0" role="button">Click Mecustom-button>
custom-button display: inline-block; margin: 10px; > custom-button:focus /* Обеспечьте резервный стиль для браузеров, которые не поддерживают: focus-visible */ outline: none; background: lightgrey; > custom-button:focus:not(:focus-visible) /* Remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent; > custom-button:focus-visible /* Draw a very noticeable focus style for keyboard-focus on browsers that do support :focus-visible */ outline: 4px dashed darkorange; background: transparent; >
Polyfill
You can polyfill :focus-visible using focus-visible.js.
Accessibility concerns
Low vision
Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.
- Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
Cognition
It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.
Specifications
| Specification |
|---|
| Selectors Level 4 # the-focus-visible-pseudo |
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 11 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
:focus-visible¶
Псевдокласс :focus-visible применяется, в то время как элемент соответствует псевдоклассу :focus , и UA определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.
Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).
Обратите внимание, что Firefox поддерживает аналогичную функциональность через старый псевдокласс с префиксом :-moz-focusring .
Синтаксис¶
1 2 3
:focus-visible /* */ > Спецификации¶
Полифил¶
Псевдокласс :focus-visible можно эмулировать с помощью focus-visible.js.
Пример¶
CSS HTML Результат
1 2 3 4 5 6 7 8 9 10 11 12
input, button margin: 10px; > .focus-only:focus outline: 2px solid black; > .focus-visible-only:focus-visible outline: 4px dashed darkorange; > 1 2 3 4 5 6
input value="Default styles" />br /> button>Default stylesbutton>br /> input class="focus-only" value=":focus only" />br /> button class="focus-only">:focus onlybutton>br /> input class="focus-visible-only" value=":focus-visible only" />br /> button class="focus-visible-only">:focus-visible onlybutton> :focus — visible
Выделяем элементы в фокусе только тогда, когда это действительно необходимо.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 12 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдокласс :focus — visible используется, когда действительно нужно визуально выделить элементы в фокусе.
Пример
Скопировать ссылку «Пример» Скопировано
При попадании фокуса на кнопку будем показывать белую обводку. Обратите внимание, что мы сбросили стили для :focus , поэтому если установить фокус на кнопку, нажав на неё, обводки не будет. Но если использовать Tab , то обводка появится.
button:focus outline: none;> .button:focus-visible border: 2px solid #FFFFFF; outline: none;>button:focus outline: none; > .button:focus-visible border: 2px solid #FFFFFF; outline: none; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
После любого селектора ставим двоеточие и пишем ключевое слово focus — visible :
a:focus-visible outline: 2px solid hotpink;>a:focus-visible outline: 2px solid hotpink; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Зачем нужен этот :focus — visible , если есть :focus ? Оба псевдокласса применяются, когда элемент в фокусе. Но отличие в том, что :focus — visible используется только тогда, когда браузер считает, что наличие фокуса на элементе необходимо обозначить визуально.
Например, людям при использовании мышки или тачпада не обязательно знать, что элемент в фокусе, но когда для навигации используется клавиатура, визуальное отображение фокуса просто необходимо.
Важно помнить, что отсутствие фокуса — не очень хорошая практика с точки зрения доступности. Некоторых людей может запутать разное поведение фокуса при использовании мыши и клавиатуры.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Изменить стандартное поведение фокуса можно с помощью атрибутов contenteditable и tabindex .
убирать focus-within при клике(:active)
как можно убрать focus-within с элемента списка по клику на ссылку. При фокусе должен меняться фон а при ховере и клике фона быть не должно. Или делать фокус на ссылку, но тогда не захватывает фон где абсолютная стрелка в :after. вот codepen
$primary: #9D5CD0 $light-primary: #C283F3 $dark-primary: #7943A4 $white: #fff a text-decoration: none ul, li list-style: none .bottomnav background-color: #333 &__list display: flex &__item padding: 2px 20px 2px 5px &:not(:last-child) margin-right: 93px &:focus-within outline: none background-color: $primary &__link position: relative display: inline-block max-width: 200px font-size: 18px line-height: 24.5px color: $white word-wrap: break-word transition: color .3s &::after content: '' position: absolute top: 8px right: -14px display: inline-block width: 8px height: 8px border-left: 1px solid $white border-bottom: 1px solid $white transform: rotate(-45deg) transition: border-color .3s &:focus-visible outline: none // background-color: $primary &:hover color: $light-primary &::after border-color: $light-primary &:active color: $dark-primary &::after border-color: $dark-primary Отслеживать
задан 6 дек 2021 в 23:44
1 2 2 бронзовых знака
«При фокусе должен меняться фон а при ховере и клике фона быть не должно.» Противоречий не находите? :focus активируется при клике мышью.
7 дек 2021 в 6:44
да но focus-visible не оставляет активный фокус