CSS :focus — стиль поля чи кнопки у фокусі
CSS-селектор :focus обирає елемент, що зараз у фокусі — тобто той, який приймає ввід із клавіатури.
Загальний опис
автор: NagarD
Синтаксис
:focus {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Клацни в поле (або дійди до нього клавішею 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;
}Своє обведення замість типового: outline не знято, а замінено — з відступом, щоб не липло до поля.
HTML
<form class="f">
<label>Ім'я <input placeholder="клацніть сюди"></label>
<label>Пошта <input type="email" placeholder="або дійдіть клавішею Tab"></label>
<button>Надіслати</button>
</form>CSS
.f {
display: grid;
gap: .75rem;
max-width: 22rem;
font: 15px system-ui, sans-serif;
}
.f input {
width: 100%;
padding: .5rem;
border: 1px solid #94a3b8;
border-radius: 6px;
}
.f button {
padding: .5rem 1rem;
border: 0;
border-radius: 6px;
background: #2563eb;
color: #fff;
}
/* замінюємо типовий індикатор, а не прибираємо його */
.f input:focus,
.f button:focus {
outline: 3px solid #93c5fd;
outline-offset: 2px;
border-color: #2563eb;
}Коментарі
Коментарів ще немає — будьте першим!