Стилизация textarea [Модуль 11: Формы и CSS]: Тренажер CSS

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

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

Список тем

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

id: 37467_css-textarea-basic-size-padding

Начнем с основ. Задайте для элемента `<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.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-border-style

Давайте изменим стандартную рамку. Сделайте рамку толщиной 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' означает сплошную линию.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-border-radius

Смягчим углы нашего текстового поля. Установите радиус скругления углов равным 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.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-background-text-color

Измените цвет фона текстового поля на светло-серый (#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` для цвета текста.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-font-style

Установите для текста внутри `<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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-disable-resize

По умолчанию пользователи могут изменять размер `<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`, чтобы запретить изменение размера элемента.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-vertical-resize

Иногда полезно разрешить пользователю менять только высоту поля ввода, но не ширину. Установите для `<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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-remove-focus-outline

Браузеры по умолчанию добавляют обводку (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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-focus-shadow

Вместо стандартной обводки добавим более приятный эффект при фокусе - легкую тень. При получении фокуса добавьте `<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, радиус размытия, (опционально) радиус растяжения, цвет.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-placeholder-style

Давайте изменим внешний вид текста-заполнителя (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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37467_css-textarea-icon-inside

Добавьте небольшую иконку (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 в размерах

id: 37467_css-textarea-box-sizing

Сейчас, если задать `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`.

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

Результат

Сообщения

Выполнить

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