Хочешь сайт? Легко!

:focus CSS

Псевдокласс :focus определяет стиль для элемента, получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.

Песочница

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

Чем отличаются :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>

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !