Textarea CSS: настройка и стилизация текстовой области на вашем сайте

Textarea - это элемент HTML-форм, который позволяет пользователю вводить многострочный текст. CSS (Cascade Style Sheets) позволяет изменять внешний вид и оформление текстовых полей, включая textarea.

Пример:

HTML код:

CSS код:

#myTextarea {
    width: 300px; /*ширина*/
    height: 100px; /*высота*/
    padding: 10px; /*внутренний отступ*/
    border: 2px solid gray; /*рамка*/
    border-radius: 5px; /*скругленные углы рамки*/
    font-size: 16px; /*размер шрифта*/
    color: #333; /*цвет текста*/
    background-color: #f2f2f2; /*цвет фона*/
    line-height: normal; /*межстрочный интервал*/
    resize: vertical; /*разрешение изменения размера в вертикальном направлении*/
}

В примере выше мы определяем некоторые свойства для textarea с помощью CSS. Ширина и высота задают размеры поля в пикселях. Padding определяет внутренние отступы, которые позволяют отделить текст от границы поля. Border определяет толщину и цвет рамки вокруг поля. Border-radius позволяет скруглить углы рамки. Font-size задает размер шрифта внутри поля. Color определяет цвет текста в поле. Background-color задает цвет фона. Line-height задает межстрочный интервал. Resize разрешает изменение размера по вертикали.

Пример можно улучшить, добавив различные состояния элемента (наведение мыши, фокус и т.д.).

HTML код:

CSS код:

#myTextarea {
    width: 300px;
    height: 100px;
    padding: 10px;
    border: 2px solid gray;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    background-color: #f2f2f2;
    line-height: normal;
    resize: vertical;
}
#myTextarea:hover {
    background-color: #e6e6e6; /*изменение цвета фона при наведении*/
}
#myTextarea:focus {
    box-shadow: 0 0 0 2px #87CEFA; /*добавление тени при фокусе*/
    outline: none; /*убираем стандартную рамку фокуса*/
}

Также можно добавить другие свойства, такие как font-family, font-weight, text-align и другие, чтобы адаптировать textarea под дизайн страницы и достичь нужного визуального эффекта.