:focus
Псевдокласс :focus CSS псевдокласса представляет собой элемент (например, элемент формы ввода), который получил фокус. Обычно он срабатывает, когда пользователь нажимает или нажимает на элемент или выбирает его клавишей Tab на клавиатуре.
Попробуйте
Примечание: Этот псевдокласс применяется только к самому элементу, получившему фокус. Используйте :focus-within, если вы хотите выбрать элемент, который содержит элемент, получивший фокус.
Синтаксис
:focus {
/* ... */
}
Удобство для людей с ограниченными возможностями
Убедитесь, что индикатор визуального фокуса виден людям с нарушением зрения. Это также будет полезно для всех, кто использует экран в ярко освещенном месте (например, на улице под солнцем). WCAG 2.1 SC 1.4.11 Контрастность нетекстовых элементов требует, чтобы индикатор визуального фокуса был не менее 3:1.
- Доступные индикаторы визуального фокуса: Предоставьте своему сайту фокус! Советы по проектированию полезных и удобных индикаторов фокуса
:focus { outline: none; }
Никогда не удаляйте контур фокуса (видимый индикатор фокуса) без его замены контуром фокуса, который будет соответствовать WCAG 2.1 SC 1.4.11 Контрастность нетекстовых элементов.
- Быстрый совет: Никогда не удаляйте CSS-контуры
Примеры
HTML
<div><input class="red-input" value="I'll be red when focused." /></div> <div><input class="blue-input" value="I'll be blue when focused." /></div>
CSS
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
Результат
Спецификации
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
:focus |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
