Урок 44 із 104
42%
← Назад

Фокус для елементів форм в HTML

Вивчаємо CSS-псевдоклас :focus для стилізації активного елемента форми.

Фокус для елементів форм в HTML

Коли користувач натискає на поле форми або переходить до нього за допомогою клавіші Tab, цей елемент отримує фокус. Для стилізації таких елементів використовується псевдоклас :focus.

  • :focus застосовується до активного елемента.
  • Найчастіше використовується для input, textarea та select.
  • Дозволяє показати користувачу, яке поле зараз вибране.

Простий приклад :focus

<input type="text">

<input type="email">
input:focus {
  border: 2px solid blue;
  outline: none;
}
input {
  padding: 10px;
  border: 1px solid gray;
}

input:focus {
  border-color: green;
  background-color: #f0fff0;
}

Фокус для textarea

<textarea></textarea>
textarea:focus {
  border: 2px solid orange;
}

Фокус для кнопок

<button>
  Відправити
</button>
button:focus {
  outline: 3px solid blue;
}
❗ Важливо:

:focus важливий не тільки для краси, а й для доступності. Користувачі, які керують сайтом клавіатурою, повинні бачити активний елемент.

input {
  padding: 10px;
  border: 1px solid #999;
}

input:focus {
  border-color: blue;
  outline: none;
}

Практичне завдання

📌 Завдання:
  1. №1. Створіть форму з полем імені та email.
  2. №2. Додайте стилі для звичайного стану полів.
  3. №3. При фокусі змініть колір рамки.
<!-- Початковий код -->

<form>

  <input type="text">

  <input type="email">

</form>
💡 Показати підказку

Для стилізації активного поля використовуйте селектор input:focus.

✅ Показати відповідь
<form>

  <input 
    type="text"
    placeholder="Ім'я"
  >

  <br>

  <input
    type="email"
    placeholder="Email"
  >

</form>