CSS selector input:focus
Селектор :focus використовується для вибірки елеметів, що потрапили у фокус.
Елемент отримує фокус, коли ви встановлюєте курсор в поле введення. При цьому в полі з'являється мигаючий курсор.
Синтаксис
:focus {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| focus | 4.0 | 2.0 | 3.1 | 9.6 | 8.0 |
Мобільних переглядачів ще не додано.
Приклади
+ запропонувати свій приклад у пісочниці
Клацни в поле (або дійди до нього клавішею Tab) — доки воно у фокусі, тло жовте.
HTML
<p>Клацни в поле:</p>
<input type="text" placeholder="У фокусі стану жовтим">CSS
input:focus {
background-color: yellow;
}Поки поле у фокусі, його ширина плавно росте зі 100px до 250px — анімацію робить transition, а вмикає її :focus.
HTML
<p>Клацни в поле — воно плавно розшириться:</p>
<input type="text" placeholder="Натисни сюди">CSS
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}Коментарі
Коментарів ще немає — будьте першим!