Textarea CSS шаблоны

Шаблоны CSS для текстовых полей для длинных ответов

Текстовое поле предназначено для ввода предложений, а не имени или адреса электронной почты, поэтому правила, подходящие для однострочного поля, делают его слишком тесным. Шаблон действительно определяет область ввода: насколько глубоко открывается поле, как текст располагается внутри него, насколько его можно перетаскивать и что меняется при фокусировке.

Надежная отправная точка обеспечивает полю полную ширину, потолок около 640 пикселей, минимальную высоту около 140 пикселей, отступы около 12 на 14 пикселей, тонкую серую рамку с небольшим радиусом, наследуемую типографику, высоту строки 1,5, изменение размера только по вертикали и размер рамки.

Размер, отступы, изменение размера, состояния фокуса

Каждое из этих решений имеет свою причину:

• "min-height" открывает поле достаточно глубоко, чтобы первые строки ответа оставались видимыми во время его написания;

• Параметр "max-width" со значением 100% и параметром "box-sizing: border-box" удерживает поле внутри контейнера на узких экранах, не сдвигая макет в стороны;

• Параметр "line-height" около 1,5 делает длинный ответ читаемым во время набора текста, а не только после отправки;

• Параметр "resize: vertical" позволяет пользователям увеличивать размер поля, блокируя при этом сдвиг в стороны, который нарушает целостность окружающего столбца;

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

Стоит отметить два компромисса. Высокая фиксированная высота выглядит щедро на настольном компьютере и неуклюже на телефоне, поэтому минимальная высота плюс процент ширины — более безопасный вариант. А параметр "resize: none" защищает макет, но блокирует тех, чей ответ оказывается длиннее, чем предполагалось; максимальная высота с автоматическим вертикальным переполнением решает эту проблему более удобно.

Три практичных варианта стиля

Компактное поле для обратной связи может иметь минимальную глубину около 90 пикселей с более плотными отступами, поскольку два или три предложения — это его реалистичный потолок. Запрос в службу поддержки заслуживает 180 пикселей, более свободного межстрочного интервала и максимальной высоты, чтобы вставленный текст прокручивался, а не растягивал макет. Техническое задание на проект идет дальше: более широкий потолок, около 240 пикселей в глубину, и достаточные отступы, чтобы весь экран никогда не касался границы.

Пользовательские правила классов без перестройки

Nicepage охватывает стандартный внешний вид с помощью стилизации полей ввода форм, включая шрифт, заливку, границу и связанные свойства. Когда многострочное поле требует собственного поведения, пользовательский код CSS — более узконаправленный путь: назначьте класс, например, «feedback-textarea», на панели свойств, а затем примените одно правило для управления минимальной глубиной, вертикальным изменением размера, границей фокуса и шириной для мобильных устройств. В документации по пользовательскому CSS объясняется, как добавлять правила и назначать классы.

Выбирайте шаблон, исходя из ожидаемого объема текста и того, как поле должно вести себя при превышении лимита, а не из того, как оно выглядит в пустом состоянии.