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

• Все псевдоклассы CSS, хорошо видны сравнения
• Красивая форма входа (см. стилизацию input)

Элементу, получившему фокус, можно задать стиль с помощью псевдокласса :focus [w3.org].

Чем отличаются :active, :focus и :hover

<style>
.input1:hover { /* при наведении курсора мышки */
  background: blue;
}
.input1:focus { /* при фокусе, то есть период между щелчком по элементу (неважно правой или левой клавишей мышки) и щелчком вне элемента */
  background: green;
}
.input1:active { /* пока элемент активен, то есть пока нажата правая кнопка мышки */
  background: red;
}
</style>

<input type="text" class="input1"/>

:active, :focus и :hover равнозначны, побеждает тот, что ниже.

<style>
.input2:active {
  background: red;
}
.input2:focus {
  background: green;
}
.input2:hover {
  background: blue;
}
</style>

<input type="text" class="input2"/>

:focus для тегов HTML: input, select и textarea

<input type="text" class="input" placeholder="ФИО"/>

:focus для всех тегов HTML

:focus можно прописать для любого тега HTML, но если это не элемент формы, то нужно указывать атрибут tabindex или contenteditable.

Это тег div. Его содержимое не поменять.

<div class="input" tabindex="0">Это тег div</div>

Это тег div. Его содержимое можно менять.

<div class="input" contenteditable>Это тег div</div>

Как снять фокус CSS

1. Кликнуть вне элемента.
2. Кликнуть по дочернему элементу, который может иметь фокус.

   Нажатие и на зелёное поле, и на синее приведёт к смене фона. Клик по синему полю не снимет фокус.

   
   
   <div class="raz" tabindex="0">
     <div></div>
   </div>

   Нажатие только на зелёное поле приведёт к смене фона. Клик по синему полю снимет фокус с родителя, установит фокус на внутреннем div.

   <div tabindex="0" class="raz">
     <div tabindex="0"></div>
   </div>

3. Кликнуть по элементу, который в состоянии фокуса имеет pointer-events: none;.

   Нажатие на зелёное поле приведёт к смене фона. Повторный щелчок снимет фокус.

   
   
   <div class="dva" tabindex="0"></div>

4. Кликнуть по дочернему элементу, если для элемента в состоянии фокуса стоит visibility: hidden;. Google Chrome не хочет, чтобы в состоянии фокуса элемент пропадал.

   
   
   <div class="tri" tabindex="0">
     <div></div>
   </div>

Практические примеры

1. Адаптивное горизонтальное меню для сайта на CSS
2. Фотогалерея для сайта на CSS