Псевдоэлемент ::placeholder: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в использовании псевдоэлемента `::placeholder` для изменения внешнего вида текста-заполнителя в элементах `<input>` и `<textarea>`. Вы научитесь изменять цвет, стиль шрифта, прозрачность и другие свойства плейсхолдера, чтобы сделать ваши формы более привлекательными и информативными. Задания построены от простого к сложному, начиная с базового изменения цвета и заканчивая более специфичными сценариями стилизации.

Список тем

Изменение цвета плейсхолдера

Самое базовое применение псевдоэлемента ::placeholder - изменение цвета текста-заполнителя. В этом задании вам нужно стилизовать поле ввода так, чтобы текст 'Введите ваше имя...' отображался светло-серым цветом (#aaaaaa).

CSS

input[type="text"]input1 {
  color: #aaaaaa;
}

                     input[type="text"]input1 {
  color: #aaaaaa;
}

HTML

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" placeholder="Введите ваше имя...">
</form>

Используйте псевдоэлемент `::placeholder` для выбора текста-заполнителя. Затем примените свойство `color` с нужным значением цвета.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Курсивный плейсхолдер

Текст-заполнитель часто делают курсивным, чтобы он визуально отличался от введенного пользователем текста. Сделайте так, чтобы плейсхолдер 'example@mail.com' в поле для email отображался курсивом.

CSS

input[type="email"]::placeholder {
  input1: italic;
}

                     input[type="email"]::placeholder {
  input1: italic;
}

HTML

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="example@mail.com">
</form>

Добавьте правило для псевдоэлемента `::placeholder` у соответствующего поля ввода. Используйте свойство `font-style` со значением `italic`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Полупрозрачный плейсхолдер

Иногда нужно сделать плейсхолдер менее заметным, например, полупрозрачным. Установите для плейсхолдера 'Ваш комментарий...' в текстовом поле прозрачность 50%.

CSS

textareainput1 {
  input2: 0.5;
}

                     textareainput1 {
  input2: 0.5;
}

HTML

<form>
  <label for="comment">Комментарий:</label>
  <textarea id="comment" placeholder="Ваш комментарий..."></textarea>
</form>

Используйте псевдоэлемент `::placeholder` для элемента `<textarea>`. Примените свойство `opacity` со значением `0.5`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация плейсхолдера по классу

Часто требуется применить стили плейсхолдера только к определенным полям ввода. Задайте для поля ввода с классом 'required-field' плейсхолдер красного цвета (#ff0000), чтобы указать на обязательность заполнения.

CSS

input1::placeholder {
  color: #ff0000;
}

                     input1::placeholder {
  color: #ff0000;
}

HTML

<form>
  <label for="phone">Телефон:</label>
  <input type="tel" id="phone" class="required-field" placeholder="Обязательно для заполнения">
  <label for="address">Адрес:</label>
  <input type="text" id="address" placeholder="Не обязательно">
</form>

Скомбинируйте селектор класса `.required-field` с псевдоэлементом `::placeholder`. Используйте свойство `color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание текста плейсхолдера

По умолчанию текст плейсхолдера выравнивается так же, как и вводимый текст. Измените выравнивание текста плейсхолдера 'Поиск...' на центр.

CSS

input[type="search"]::placeholder {
  input1: center;
}

                     input[type="search"]::placeholder {
  input1: center;
}

HTML

<form>
  <input type="search" placeholder="Поиск...">
</form>

Используйте псевдоэлемент `::placeholder` для поля поиска. Примените свойство `text-align` со значением `center`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение регистра плейсхолдера

С помощью CSS можно изменить регистр текста плейсхолдера. Сделайте так, чтобы текст плейсхолдера 'password' отображался только заглавными буквами.

CSS

input[type="password"]input1 {
  input2: uppercase;
}

                     input[type="password"]input1 {
  input2: uppercase;
}

HTML

<form>
  <label for="pass">Пароль:</label>
  <input type="password" id="pass" placeholder="password">
</form>

Примените к псевдоэлементу `::placeholder` поля для пароля свойство `text-transform` со значением `uppercase`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комплексная стилизация плейсхолдера

Примените несколько стилей к плейсхолдеру одновременно. Для поля ввода 'Ваше сообщение' сделайте текст плейсхолдера синим (#007bff), курсивным и увеличьте межбуквенное расстояние до 1px.

CSS

textarea::placeholder {
  color: #007bff;
  input1: italic;
  input2: 1px;
}

                     textarea::placeholder {
  color: #007bff;
  input1: italic;
  input2: 1px;
}

HTML

<form>
  <textarea placeholder="Ваше сообщение"></textarea>
</form>

В правиле для `::placeholder` используйте свойства `color`, `font-style` и `letter-spacing` с соответствующими значениями.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку