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

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

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

Список тем

Базовые размеры и отступы

Начнем с основ. Задайте для элемента `<textarea>` ширину 90% от родительского контейнера и внутренние отступы (padding) со всех сторон равные 10px. Высоту оставьте по умолчанию.

CSS

textarea {
  width: 90%;
  input1: 10px;
  /* Не меняйте высоту */
  min-height: 100px; /* Добавлено для наглядности в iframe */
}

                     textarea {
  width: 90%;
  input1: 10px;
  /* Не меняйте высоту */
  min-height: 100px; /* Добавлено для наглядности в iframe */
}

HTML

<textarea placeholder="Введите текст здесь..."></textarea>

Используйте свойство `width` для задания ширины в процентах. Для внутренних отступов используйте свойство `padding` со значением 10px.

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

Результат

Сообщения

Выполнить

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

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

Стилизация рамки

Давайте изменим стандартную рамку. Сделайте рамку толщиной 2px, сплошной (solid) и цветом #cccccc.

CSS

textarea {
  width: 90%;
  padding: 10px;
  min-height: 100px;
  input1: 2px solid #cccccc;
}

                     textarea {
  width: 90%;
  padding: 10px;
  min-height: 100px;
  input1: 2px solid #cccccc;
}

HTML

<textarea placeholder="Текст с новой рамкой..."></textarea>

Используйте составное свойство `border` для одновременной установки толщины, стиля и цвета рамки. Порядок значений: толщина, стиль, цвет. Стиль 'solid' означает сплошную линию.

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

Результат

Сообщения

Выполнить

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

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

Скругление углов

Смягчим углы нашего текстового поля. Установите радиус скругления углов равным 5px.

CSS

textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  min-height: 100px;
  input1: 5px;
}

                     textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  min-height: 100px;
  input1: 5px;
}

HTML

<textarea placeholder="Текст со скругленными углами..."></textarea>

Для скругления углов элемента используется свойство `border-radius`. Укажите значение 5px.

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

Результат

Сообщения

Выполнить

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

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

Фон и цвет текста

Измените цвет фона текстового поля на светло-серый (#f9f9f9) и цвет вводимого текста на темно-серый (#333333).

CSS

textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  input1: #f9f9f9;
  input2: #333333;
}

                     textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  input1: #f9f9f9;
  input2: #333333;
}

HTML

<textarea placeholder="Введите темный текст на светлом фоне..."></textarea>

Используйте свойство `background-color` для цвета фона и свойство `color` для цвета текста.

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

Результат

Сообщения

Выполнить

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

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

Изменение шрифта

Установите для текста внутри `<textarea>` шрифт 'Arial' (или любой sans-serif шрифт как запасной) и размер шрифта 14px.

CSS

textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333333;
  min-height: 100px;
  input1: Arial, sans-serif;
  font-size: 14px;
}

                     textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333333;
  min-height: 100px;
  input1: Arial, sans-serif;
  font-size: 14px;
}

HTML

<textarea placeholder="Текст другим шрифтом..."></textarea>

Используйте свойство `font-family`, чтобы задать список шрифтов (основной и запасные через запятую). Для размера шрифта используйте свойство `font-size`.

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

Результат

Сообщения

Выполнить

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

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

Запрет изменения размера

По умолчанию пользователи могут изменять размер `<textarea>`. Сделайте так, чтобы изменять размер было нельзя.

CSS

textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  input1: none;
}

                     textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  input1: none;
}

HTML

<textarea placeholder="Этот размер нельзя изменить..."></textarea>

Используйте свойство `resize` со значением `none`, чтобы запретить изменение размера элемента.

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

Результат

Сообщения

Выполнить

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

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

Разрешить только вертикальное изменение размера

Иногда полезно разрешить пользователю менять только высоту поля ввода, но не ширину. Установите для `<textarea>` возможность изменения размера только по вертикали.

CSS

textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  input1: vertical;
}

                     textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  input1: vertical;
}

HTML

<textarea placeholder="Тяни меня только вверх или вниз..."></textarea>

Используйте свойство `resize` со значением `vertical`.

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

Результат

Сообщения

Выполнить

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

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

Убрать стандартную обводку при фокусе

Браузеры по умолчанию добавляют обводку (outline) к элементам форм при получении фокуса. Уберите эту стандартную обводку для `<textarea>`.

CSS

textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
}

textarea:input1 {
  input2: none;
}

                     textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
}

textarea:input1 {
  input2: none;
}

HTML

<textarea placeholder="Кликни сюда, обводки не будет..."></textarea>

Используйте псевдокласс `:focus` для стилизации элемента в состоянии фокуса. Установите свойство `outline` в значение `none`.

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

Результат

Сообщения

Выполнить

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

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

Добавить тень при фокусе

Вместо стандартной обводки добавим более приятный эффект при фокусе - легкую тень. При получении фокуса добавьте `<textarea>` тень с параметрами: смещение по X 0, смещение по Y 0, размытие 5px, цвет #66afe9.

CSS

textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  outline: none; /* Убираем стандартную обводку */
  transition: box-shadow 0.3s ease-in-out; /* Плавный переход */
}

textarea:focus {
  input1: 0 0 5px #66afe9;
}

                     textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  outline: none; /* Убираем стандартную обводку */
  transition: box-shadow 0.3s ease-in-out; /* Плавный переход */
}

textarea:focus {
  input1: 0 0 5px #66afe9;
}

HTML

<textarea placeholder="Кликни сюда, появится тень..."></textarea>

Используйте псевдокласс `:focus`. Для добавления тени используйте свойство `box-shadow`. Значения указываются в порядке: смещение по X, смещение по Y, радиус размытия, (опционально) радиус растяжения, цвет.

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

Результат

Сообщения

Выполнить

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

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

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

Давайте изменим внешний вид текста-заполнителя (placeholder). Сделайте его светло-серым (#999999) и курсивным.

CSS

textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  color: #333;
}

textarea::input1 {
  color: #999999;
  input2: italic;
}

                     textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  color: #333;
}

textarea::input1 {
  color: #999999;
  input2: italic;
}

HTML

<textarea placeholder="Этот текст теперь стилизован..."></textarea>

Для стилизации плейсхолдера используется специальный псевдоэлемент `::placeholder`. Внутри его правил задайте нужный `color` и `font-style` со значением `italic`.

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

Результат

Сообщения

Выполнить

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

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

Иконка внутри поля

Добавьте небольшую иконку (https://naytikurs.ru/img/7.png) внутрь текстового поля справа сверху. Иконка не должна повторяться, и должны быть установлены внутренние отступы справа, чтобы текст не налезал на иконку.

CSS

textarea {
  width: 90%;
  padding: 10px;
  padding-right: 35px; /* Дополнительный отступ справа для иконки */
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  background-image: url('https://naytikurs.ru/img/7.png');
  input1: no-repeat;
  input2: right 10px top 10px;
  /* Можно использовать проценты: background-position: 98% 10px; */
  background-size: 16px 16px; /* Размер иконки */
}

                     textarea {
  width: 90%;
  padding: 10px;
  padding-right: 35px; /* Дополнительный отступ справа для иконки */
  border: 1px solid #cccccc;
  border-radius: 5px;
  min-height: 100px;
  background-image: url('https://naytikurs.ru/img/7.png');
  input1: no-repeat;
  input2: right 10px top 10px;
  /* Можно использовать проценты: background-position: 98% 10px; */
  background-size: 16px 16px; /* Размер иконки */
}

HTML

<textarea placeholder="Текст с иконкой..."></textarea>

Используйте `background-image` для добавления иконки. Свойство `background-repeat` со значением `no-repeat` запретит повторение. Свойство `background-position` поможет разместить иконку (например, `right 10px top 10px` или `98% 10px`). Увеличьте `padding-right`, чтобы текст не перекрывал иконку.

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

Результат

Сообщения

Выполнить

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

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

Учет padding в размерах

Сейчас, если задать `width: 100%` и `padding`, реальная ширина элемента станет больше 100% из-за отступов. Исправьте это, чтобы `padding` и `border` включались в общую ширину и высоту элемента.

CSS

textarea {
  width: 100%; /* Теперь это реальные 100% */
  padding: 15px;
  border: 2px solid #cccccc;
  min-height: 100px;
  input1: border-box;
}

                     textarea {
  width: 100%; /* Теперь это реальные 100% */
  padding: 15px;
  border: 2px solid #cccccc;
  min-height: 100px;
  input1: border-box;
}

HTML

<div style="width: 300px; border: 1px dashed blue; padding: 5px;">
  <textarea placeholder="Моя ширина 100% родителя..."></textarea>
</div>

Используйте свойство `box-sizing` со значением `border-box`. Это изменит блочную модель элемента так, что `width` и `height` будут включать `padding` и `border`.

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

Результат

Сообщения

Выполнить

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

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