Урок 36 із 104
35%
← Назад

Псевдоелемент placeholder в CSS

Вивчаємо псевдоелемент ::placeholder для стилізації тексту підказки в HTML-полях введення.

Псевдоелемент placeholder в CSS

Псевдоелемент ::placeholder використовується для зміни стилю тексту, який знаходиться всередині атрибута placeholder.

За допомогою ::placeholder можна змінювати колір, розмір, шрифт та інші властивості тексту підказки.

Синтаксис ::placeholder

input::placeholder {
  color: gray;
}

Приклад стилізації placeholder

<input
  type="text"
  placeholder="Введіть ваше ім'я"
>
input::placeholder {
  color: blue;
  font-size: 18px;
  font-style: italic;
}

Стилізація textarea

Псевдоелемент ::placeholder працює не тільки з input, але й з textarea.

<textarea
  placeholder="Напишіть повідомлення"
></textarea>
textarea::placeholder {
  color: green;
  font-size: 16px;
}
❗ Важливо:

Псевдоелемент ::placeholder змінює тільки текст-підказку. Значення, яке вводить користувач, він не стилізує.

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

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

<input
  type="text"
  placeholder="Ваше ім'я"
>
💡 Показати підказку

Для стилізації placeholder використовуйте селектор елемента::placeholder.

✅ Показати відповідь
<input
  type="text"
  placeholder="Ваше ім'я"
>

<style>
input::placeholder {
  color: red;
  font-size: 18px;
}
</style>