CSS псевдокласс :focus
Псевдокласс :focus выбирает элементы в фокусе. Узнайте о псевдоклассе и потренируйтесь на примерах.
Псевдокласс :focus выбирает и стилизует элемент, пока он находится в фокусе — то есть пока он является элементом, готовым к получению ввода с клавиатуры.
В один момент времени только один элемент на странице может находиться в фокусе. Элементы управления формами, такие как <input>, <button>, <textarea>, а также ссылки могут получить фокус с помощью клавиши Tab или щелчком мыши. Неинтерактивные элементы (например, <div>) тоже могут стать фокусируемыми, если добавить к ним атрибут tabindex="0".
На этой странице рассматривается принцип работы :focus, объясняется, почему почти никогда не следует убирать индикатор фокуса без замены, а также описываются связанные псевдоклассы :focus-visible и :focus-within, решающие типичные задачи, с которыми :focus в одиночку не справляется.
Как работает стилизация фокуса
Когда элемент получает фокус, браузер применяет стандартный outline, чтобы пользователи клавиатуры видели, где они находятся. Правило :focus позволяет переопределить или улучшить этот индикатор:
input:focus {
outline: 2px solid #2563eb;
background-color: #eef4ff;
}:focus — это динамический псевдокласс: стили применяются только пока элемент находится в фокусе и снимаются в момент перехода фокуса на другой элемент (например, когда пользователь переходит к следующему полю с помощью Tab).
Доступность
Визуальный индикатор фокуса должен быть доступен всем пользователям. Согласно WCAG 2.1 SC 2.4.7 Focus Visible, индикатор фокуса должен быть чётко виден и иметь коэффициент контрастности не менее 3:1 относительно соседних цветов.
Распространённая ошибка — полное удаление outline ради «более чистого» вида:
/* Don't do this on its own — keyboard users lose all feedback */
:focus {
outline: none;
}Если вы убираете стандартный outline, всегда заменяйте его пользовательским индикатором (видимой рамкой, box-shadow или изменением фона), соответствующим требованию контрастности 3:1:
button:focus {
outline: none;
box-shadow: 0 0 0 3px #2563eb;
}:focus и :focus-visible
Обычный :focus срабатывает как при щелчке мышью, так и при навигации с помощью Tab. Это означает, что после клика по кнопке может остаться кольцо фокуса — визуально мешающее пользователям мыши, но необходимое для пользователей клавиатуры.
Псевдокласс :focus-visible решает эту проблему: браузер применяет его только тогда, когда считает видимый индикатор действительно полезным — как правило, при навигации с клавиатуры. Рекомендуемый подход — оставить ненавязчивый индикатор для всех и яркое кольцо только для :focus-visible:
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}:focus-within
:focus-within совпадает с элементом, когда он сам или любой из его потомков находится в фокусе. Это удобно для выделения целой группы полей формы, карточки или выпадающего списка при активации одного из его полей ввода:
.field:focus-within {
border-color: #2563eb;
}Версия
Синтаксис
CSS :focus syntax example
:focus {
css declarations;
}Пример селектора :focus:
CSS :focus code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name" /> Surname:
<input type="text" name="surname" />
</form>
</body>
</html>Пример селектора :focus с тегом <label>:
CSS :focus another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=text] {
width: 100px;
transition: width .2s ease-in-out;
}
input[type=text]:focus {
width: 150px;
background-color: #eee;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
</form>
</body>
</html>Связанные псевдоклассы
:focus — один из нескольких динамических псевдоклассов, реагирующих на взаимодействие пользователя. Узнайте о других:
:hover— стилизует элемент, пока над ним находится указатель мыши.:active— стилизует элемент в момент его активации (в момент клика).outline— свойство, которое чаще всего используется для создания пользовательского индикатора фокуса.