Псевдокласс :focus в CSS

Псевдокласс :focus выбирает и стилизует элементы, находящиеся в фокусе у пользователя.

Элементы, такие как <input>, <button>, и <textarea>, могут получать фокус либо при нажатии клавиши Tab на клавиатуре, либо по клику. Неинтерактивные элементы также могут получать фокус с клавиатуры, если у них указан атрибут tabindex="0".

Вопросы доступности

Визуальный индикатор фокуса должен быть доступен для всех пользователей. Согласно WCAG 2.1 SC 2.4.7 Focus Visible, индикатор фокуса должен быть четко виден и обеспечивать коэффициент контрастности не менее 3:1 по отношению к соседним цветам.

При удалении стандартной обводки фокуса всегда заменяйте её на пользовательский индикатор, соответствующий требованиям WCAG 2.1 SC 2.4.7.

Для улучшения пользовательского опыта рекомендуется использовать псевдокласс :focus-visible вместо :focus. Он применяет стили только при фокусе с клавиатуры, избегая ненужных визуальных изменений при использовании мыши или сенсорного экрана.

Псевдокласс :focus в CSS

css

:focus {
  outline: none;
}

Версия

CSS2 Spec

Selectors level 3

Selectors level 4

Синтаксис

Пример синтаксиса CSS :focus

css

:focus {
  css declarations;
}

Пример использования селектора :focus:

Пример кода CSS :focus

html

<!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>

Try it Yourself »

Пример использования селектора :focus с тегом `<label>`:

Ещё один пример кода CSS :focus

html

<!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>

Try it Yourself »

Практика

Какова функция псевдокласса ':focus' в CSS?

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

Псевдокласс :focus в CSS ​

Вопросы доступности ​

Версия ​

Синтаксис ​

Пример использования селектора :focus: ​

Пример использования селектора :focus с тегом <label>: ​