Стилизация Формы и ее элементов

Стилизация Формы

По умолчанию Форма наследует полную ширину своего родительского элемента. Вы можете настроить стили для Формы, включая размеры, отступы, расположение элементов и т.д. Для этого выберите Форму на Холсте или на вкладке Слоев и установите нужные стили на вкладке Дизайн.

Например, можно расположить поля формы горизонтально. Для этого:

Поместите поля Формы в новый Div-блок.

Установите в стилях режим Flex и горизонтальное направление, а также параметры выравнивания

Стилизация элементов Формы

Вы можете также стилизовать отдельно все элементы Формы. Можно установить стили для всей группы элемента, например, задав ему отступы. Также можно стилизовать отдельно метку и само поле элемента.

Например, вы можете изменить шрифт заголовка Формы и меток полей, размер и фон полей ввода, цвет и размер кнопки и т.п.

Стилизация строки ввода

У Строки ввода можно заменить Метку поля на Фоновый текст внутри поля. Для этого:

Метки полей нужно скрыть (в настройках элемента метки в разделе Display) или удалить элемент метки с Холста.

Добавить Фоновый текст в Настройках строки ввода (для элемента Input).

Стилизация поля Select

Чтобы стилизовать текст в списке выбора, вам нужно задать стили для слоя Select.

Для этого выберите слой Select на холсте или в левой панели и настройте стили на правой панели Дизайн в разделе Текст. Вы можете настроить шрифт, начертание, размер, цвет, выравнивание текста в поле, строчные/прописные буквы.

Вы можете задать фон для поля Select на панели Дизайн в разделе Внешний вид:

Настроить фон для выбранной опции в поле Select — с помощью свойства Фон (Fill).

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

Настроить фон для выпадающего списка — с помощью свойства Цвет фона (Background color).

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

Стили выпадающего списка можно увидеть только в режиме предварительного просмотра или после публикации проекта.