CSS-псевдокласс `:focus`

:focus CSS псевдокласс обозначает элемент (например, поле ввода формы), который получил фокус. Обычно он срабатывает, когда пользователь нажимает или касается элемента либо выбирает его с помощью клавиши Tab.

Попробуйте

label {
  display: block;
  margin-top: 1em;
}

input:focus {
  background-color: lightblue;
}

select:focus {
  background-color: ivory;
}

<form>
  <p>Which flavor would you like to order?</p>
  <label>Full Name: <input name="firstName" type="text" /></label>
  <label
    >Flavor:
    <select name="flavor">
      <option>Cherry</option>
      <option>Green Tea</option>
      <option>Moose Tracks</option>
      <option>Mint Chip</option>
    </select>
  </label>
</form>

Синтаксис

:focus {
  /* ... */
}

Доступность

Убедитесь, что визуальный индикатор фокуса виден людям со слабым зрением. Это также будет полезно всем, кто пользуется экраном в ярко освещённом месте (например, на улице под солнцем). Критерий WCAG 2.1 1.4.11 «Контрастность нетекстовых элементов» требует, чтобы контрастность визуального индикатора фокуса составляла не менее 3:1.

• Доступные визуальные индикаторы фокуса: Не забывайте о фокусе на сайте! Советы по созданию полезных и удобных индикаторов фокуса

:focus { outline: none; }

Никогда не удаляйте индикатор контура фокуса (видимый индикатор фокуса), не заменив его другим контуром фокуса, который соответствует требованиям критерия WCAG 2.1 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;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• :focus-visible
• :focus-within