Стилизация placeholder: Тренажер CSS

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

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

Список тем

Изменение цвета placeholder

Ваша первая задача - изменить стандартный серый цвет текста-заполнителя в поле ввода на другой. Используйте соответствующий псевдоэлемент для стилизации placeholder.

CSS

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

inputinput1 {
  color: dodgerblue;
}

                     input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

inputinput1 {
  color: dodgerblue;
}

HTML

<input type="text" placeholder="Введите ваше имя">

Для стилизации текста-заполнителя используется псевдоэлемент `::placeholder`. Добавьте его к селектору `input` и установите свойство `color`.

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

Результат

Сообщения

Выполнить

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

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

Изменение стиля шрифта placeholder

Теперь сделайте текст-заполнитель курсивным. Вам нужно добавить свойство, отвечающее за стиль шрифта, к правилу для placeholder.

CSS

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

input::placeholder {
  color: #999;
  input1: input2;
}

                     input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

input::placeholder {
  color: #999;
  input1: input2;
}

HTML

<input type="text" placeholder="Поиск...">

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

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

Результат

Сообщения

Выполнить

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

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

Изменение прозрачности placeholder

Сделайте текст-заполнитель немного более прозрачным, чем обычно. Используйте свойство CSS, которое управляет прозрачностью элемента.

CSS

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

input::placeholder {
  color: #555;
  input1: 0.6;
}

                     input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

input::placeholder {
  color: #555;
  input1: 0.6;
}

HTML

<input type="email" placeholder="Ваш email адрес">

Для управления прозрачностью используется свойство `opacity`. Примените его к псевдоэлементу `::placeholder`. Значение `opacity` должно быть между 0 (полностью прозрачный) и 1 (полностью непрозрачный).

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

Результат

Сообщения

Выполнить

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

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

Стилизация placeholder для конкретного поля

На странице есть два поля ввода: для имени и для email. Стилизуйте placeholder *только* для поля ввода email, сделав его текст зеленым. Placeholder поля для имени должен остаться без изменений.

CSS

input {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
  display: block;
}

input1input2 {
  color: green;
}

                     input {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
  display: block;
}

input1input2 {
  color: green;
}

HTML

<input type="text" placeholder="Ваше имя">
<input type="email" placeholder="Ваш email">

Чтобы применить стили только к определенному полю, используйте селектор атрибута вместе с псевдоэлементом `::placeholder`. Например, `input[type="email"]::placeholder`.

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

Результат

Сообщения

Выполнить

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

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

Комбинирование стилей для placeholder

Примените несколько стилей к placeholder одновременно: измените цвет на оранжевый, сделайте текст жирным и немного увеличьте расстояние между буквами.

CSS

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

input::placeholder {
  color: orange;
  input1: input2;
  input3: 1px;
}

                     input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

input::placeholder {
  color: orange;
  input1: input2;
  input3: 1px;
}

HTML

<input type="text" placeholder="Введите пароль">

Внутри правила для `::placeholder` можно указать несколько свойств CSS. Используйте `color` для цвета, `font-weight` для жирности (значение `bold`) и `letter-spacing` для расстояния между буквами (например, `1px`).

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

Результат

Сообщения

Выполнить

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

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

Разные стили для разных placeholder

У вас есть два поля ввода. Сделайте placeholder для первого поля синим и курсивным, а для второго - красным и с увеличенным межбуквенным интервалом.

CSS

input {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
  display: block;
}

input1::placeholder {
  color: blue;
  font-style: italic;
}

input2input3 {
  color: red;
  letter-spacing: 2px;
}

                     input {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
  display: block;
}

input1::placeholder {
  color: blue;
  font-style: italic;
}

input2input3 {
  color: red;
  letter-spacing: 2px;
}

HTML

<input type="text" id="input1" placeholder="Имя пользователя">
<input type="password" id="input2" placeholder="Пароль">

Вам нужно создать два отдельных CSS-правила. Используйте селекторы по ID (`#input1`, `#input2`) в сочетании с псевдоэлементом `::placeholder` для каждого поля. В первом правиле задайте `color` и `font-style`, во втором - `color` и `letter-spacing`.

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

Результат

Сообщения

Выполнить

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

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