Custom CSS в квизе: стили шагов, полей и кнопок

LanderLab позволяет оформлять квизы визуально, но если вам нужно больше контроля, можно использовать Custom CSS и стилизовать квиз сверх встроенных настроек. Это полезно, когда нужно тонко поднастроить внешний вид элементов квиза или применить стили, которых нет в редакторе.

Как это работает

LanderLab внедряет ваш CSS в воронку. Он автоматически ограничивается корневым контейнером .ll-quiz, поэтому стили затрагивают только квиз и никогда не влияют на остальную страницу.

Куда добавлять CSS

Панель Custom CSS в настройках редактора квиза LanderLab

В редакторе LanderLab откройте Settings > Custom CSS и вставьте свои правила. Каждый селектор, который вы напишете, уже находится внутри .ll-quiz — префикс добавлять не нужно.

Стилизовать сам корневой элемент .ll-quiz (например, background, font-family) нельзя: эти свойства управляются движком тем. Вместо этого используйте дочерние элементы.

Правила ограничения области действия

Весь ваш CSS работает внутри .ll-quiz. Переменные темы (например --colorPrimary) доступны только для чтения: их задаёт движок тем, и переопределить их нельзя. Чтобы изменить внешний вид, пишите обычные CSS-правила для селекторов из этого руководства. ✓ Так делать нужно

.ll-quiz-continue-button {
  background-color: #ff6600;
  color: #ffffff;
  border-radius: 50px;
}

✗ Так нельзя — переменные только для чтения

/* This will NOT work */
.ll-quiz {
  --colorPrimary: #ff6600;
}

Справочник селекторов

Используйте эти селекторы, чтобы обращаться к нужным элементам. Все они автоматически находятся внутри .ll-quiz.

Разметка и структура

.ll-quiz-step Все шаги (видимые и скрытые) .ll-quiz-step[data-active-step=“true”] Только текущий видимый шаг .ll-quiz-header Зафиксированная верхняя область (хедер) .ll-quiz-footer Зафиксированная нижняя область (футер) .ll-quiz-block Любой блок любого типа .ll-quiz-block—[type] Конкретный тип блока (например --text-field)

Поля ввода

.ll-quiz-block__input Все текстовые поля и select .ll-quiz-block__input-wrapper Обёртка (div) вокруг полей ввода .ll-quiz-block__label Метки полей .ll-quiz-block__decorator Иконки или текст перед полем и после него (prefix / suffix)

Кнопки

.ll-quiz-continue-button Кнопка Continue .ll-quiz-previous-button Кнопка Previous («назад») .ll-quiz-submit-button Кнопка Submit .ll-quiz-default-button Обычная кнопка действия .ll-quiz-button-text Надпись внутри любой кнопки .ll-quiz-button-description Дополнительная подпись внутри любой кнопки

Блоки выбора

.ll-choice-option Один вариант в multiple choice .ll-choice-option:has(input:checked) Выбранный вариант .ll-choice-option__text Текстовая метка внутри варианта .ll-img-choice-option Карточка варианта image choice .ll-img-choice-option:has(input:checked) Выбранная карточка image choice .ll-choice-label Метка группы вариантов в блоке выбора

Прогресс и обратная связь

.ll-quiz-progress__fill Заполненная часть индикатора .ll-quiz-header__progress-fill Заполнение индикатора прогресса в хедере .ll-quiz-block—has-error Блок, не прошедший валидацию .ll-quiz-block-error Текст сообщения об ошибке .ll-quiz-variable Динамические переменные в тексте (например, имя)

Поля ввода

У всех текстовых полей, select, textarea и похожих полей одинаковая структура классов. Селектор .ll-quiz-block__input стилизует все сразу, а чтобы настроить отдельные поля, уточните тип блока.

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

CSS

.ll-quiz-block__input {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 16px;
}

.ll-quiz-block__input:hover {
  border-color: #aaa;
}

.ll-quiz-block__input:focus {
  border-color: #3366ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}

Стилизация конкретного блока по ID

ID блока можно узнать из URL при редактировании блока в LanderLab (например, text-field-abc123).

#text-field-abc123 .ll-quiz-block__input {
  font-size: 20px;
  border-color: #ff6600;
}

Стилизация prefix / suffix

.ll-quiz-block__decorator--prefix {
  color: #888;
  font-size: 14px;
}

.ll-quiz-block__decorator--suffix svg {
  width: 18px;
  height: 18px;
  fill: #18c085;
}

Метки

.ll-quiz-block__label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.ll-quiz-block__label-text {
  color: #555;
}

Кнопки

Кнопки в LanderLab рендерятся как элементы <a>, а не <button>. Используйте специальный селектор для каждого типа кнопок или стилизуйте все кнопки сразу через общий класс.

Кнопка Continue

.ll-quiz-continue-button {
  background-color: #18c085;
  color: #ffffff;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.ll-quiz-continue-button:hover {
  background-color: #14a872;
}

Кнопка Previous

.ll-quiz-previous-button {
  background: transparent;
  color: #888;
  border: 1.5px solid #ddd;
  border-radius: 8px;
}

.ll-quiz-previous-button:hover {
  border-color: #aaa;
  color: #555;
}

Кнопка Submit

.ll-quiz-submit-button {
  background-color: #ff6600;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ll-quiz-submit-button:hover {
  background-color: #e05a00;
}

Стилизация всех кнопок сразу

.ll-quiz-continue-button,
.ll-quiz-submit-button,
.ll-quiz-default-button {
  border-radius: 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Подпись кнопки (description)

.ll-quiz-button-description {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

Блоки выбора

Варианты multiple choice и image choice можно стилизовать в состояниях по умолчанию, при наведении и при выборе.

Стилизация вариантов

.ll-choice-option {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #ffffff;
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.ll-choice-option:hover {
  transform: scale(1.02);
  border-color: #18c085;
}

/* Selected state */
.ll-choice-option:has(input:checked) {
  background-color: #e6f9f3;
  border-color: #18c085;
}

Карточки image choice

.ll-img-choice-option {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.ll-img-choice-option:has(input:checked) {
  border-color: #18c085;
  box-shadow: 0 0 0 3px rgba(24, 192, 133, 0.15);
}

Скрыть иконку radio / checkbox

.ll-choice-option__custom-input {
  display: none;
}

Индикаторы прогресса

Есть два расположения индикатора прогресса: внутри шагов и в хедере. Стилизовать их можно независимо или вместе.

Индикатор внутри шагов

/* Track */
.ll-quiz-progress--bar {
  background-color: #e8e8e8;
  border-radius: 99px;
  height: 8px;
}

/* Fill */
.ll-quiz-progress__fill {
  background-color: #18c085;
  border-radius: 99px;
  transition: width 0.4s ease;
}

Индикатор в хедере

.ll-quiz-header__progress {
  background-color: #f0f0f0;
  height: 4px;
}

.ll-quiz-header__progress-fill {
  background-color: #3366ff;
  transition: width 0.4s ease;
}

Адаптивный дизайн

LanderLab использует CSS container queries, а не media queries. Всегда пишите синтаксис контейнера, как ниже: обычные запросы @media внутри контейнера квиза работать как ожидается не будут. Точка перелома — 490px: всё, что шире, считается десктопом, всё, что уже, — мобильным. Синтаксис container query

/* Desktop (wider than 490px) */
@container quiz-container (inline-size > 490px) {
  .ll-quiz-continue-button {
    font-size: 18px;
    padding: 16px 40px;
  }
}

/* Mobile (490px and below) */
@container quiz-container (inline-size <= 490px) {
  .ll-quiz-continue-button {
    width: 100%;
    font-size: 15px;
  }

  /* Hide a block on mobile */
  #my-block-id {
    display: none;
  }
}

Не используйте @media queries Вместо @media (...) используйте @container quiz-container (...). Квиз — это компонент-контейнер, и media queries не отражают его реальную ширину.

Состояния и валидация

Когда поле не проходит валидацию, у него появляется класс .ll-quiz-block--has-error. Используйте его, чтобы оформить состояния ошибок в стиле вашего дизайна.

Стили ошибок

/* Highlight the input wrapper */
.ll-quiz-block--has-error .ll-quiz-block__input-wrapper {
  border-color: #EA7A74;
  box-shadow: 0 0 0 3px rgba(234, 122, 116, 0.15);
}

/* Style the input itself */
.ll-quiz-block--has-error .ll-quiz-block__input {
  color: #c0392b;
}

/* Style the error message text */
.ll-quiz-block-error {
  font-size: 13px;
  color: #EA7A74;
  margin-top: 6px;
  font-weight: 500;
}

Динамические переменные в тексте

В текстовых блоках могут быть живые переменные, например {{firstName}}: они обновляются по мере ввода пользователем. Они рендерятся как элементы .ll-quiz-variable (span).

.ll-quiz-variable {
  color: #18c085;
  font-weight: 600;
}

Готовые примеры

Вставьте любой из них в панель Custom CSS, чтобы быстро начать.

Пример 1 — чистая минималистичная тема

/* Inputs */
.ll-quiz-block__input {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  font-size: 15px;
  padding: 11px 14px;
}
.ll-quiz-block__input:focus {
  border-color: #333;
  background: #fff;
  outline: none;
}

/* Continue button */
.ll-quiz-continue-button {
  background-color: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.ll-quiz-continue-button:hover {
  background-color: #333;
}

/* Choice options */
.ll-choice-option {
  border: 1.5px solid #eee;
  border-radius: 8px;
}
.ll-choice-option:has(input:checked) {
  border-color: #111;
  background: #f5f5f5;
}

Пример 2 — скруглённая яркая тема

/* Inputs */
.ll-quiz-block__input {
  border: 2px solid #e0e7ff;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 15px;
}
.ll-quiz-block__input:focus {
  border-color: #6366f1;
  outline: none;
}

/* Continue + submit buttons */
.ll-quiz-continue-button,
.ll-quiz-submit-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
}

/* Progress */
.ll-quiz-progress__fill,
.ll-quiz-header__progress-fill {
  background-color: #6366f1;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selected option */
.ll-choice-option:has(input:checked) {
  background-color: #eef2ff;
  border-color: #6366f1;
}

Пример 3 — корректировки макета под мобильные

@container quiz-container (inline-size <= 490px) {
  /* Full-width buttons on mobile */
  .ll-quiz-continue-button,
  .ll-quiz-submit-button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* Larger tap targets for choices */
  .ll-choice-option {
    padding: 14px 16px;
    min-height: 52px;
  }

  /* Slightly larger input text */
  .ll-quiz-block__input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

Классы типов блоков

Используйте эти модификаторы с .ll-quiz-block, чтобы обращаться к отдельным типам блоков.

Класс-модификатор	Тип блока
`.ll-quiz-block--text-field`	Текстовое поле
`.ll-quiz-block--email-field`	Поле email
`.ll-quiz-block--phone-number-field`	Поле телефона
`.ll-quiz-block--number-field`	Числовое поле
`.ll-quiz-block--textarea-field`	Textarea
`.ll-quiz-block--select-field`	Выпадающий список (select)
`.ll-quiz-block--date-field`	Выбор даты
`.ll-quiz-block--checkbox-field`	Checkbox
`.ll-quiz-block--range-slider`	Range slider
`.ll-quiz-block--multiple-choice`	Multiple choice
`.ll-quiz-block--image-choice`	Image choice
`.ll-quiz-block--continue`	Кнопка Continue
`.ll-quiz-block--submit`	Кнопка Submit
`.ll-quiz-block--headline`	Заголовок
`.ll-quiz-block--paragraph`	Текст (абзац)
`.ll-quiz-block--progress`	Индикатор прогресса
`.ll-quiz-block--accordion`	Accordion
`.ll-quiz-block--countdown`	Таймер обратного отсчёта

​Как это работает

​Куда добавлять CSS

​Правила ограничения области действия

​Справочник селекторов

​Разметка и структура

​Поля ввода

​Кнопки

​Блоки выбора

​Прогресс и обратная связь

​Поля ввода

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

​Стилизация конкретного блока по ID

​Стилизация prefix / suffix

​Метки

​Кнопки

​Кнопка Continue

​Кнопка Previous

​Кнопка Submit

​Стилизация всех кнопок сразу

​Подпись кнопки (description)

​Блоки выбора

​Стилизация вариантов

​Карточки image choice

​Скрыть иконку radio / checkbox

​Индикаторы прогресса

​Индикатор внутри шагов

​Индикатор в хедере

​Адаптивный дизайн

​Состояния и валидация

​Стили ошибок

​Динамические переменные в тексте

​Готовые примеры

​Пример 1 — чистая минималистичная тема

​Пример 2 — скруглённая яркая тема

​Пример 3 — корректировки макета под мобильные

​Классы типов блоков

Как это работает

Куда добавлять CSS

Правила ограничения области действия

Справочник селекторов

Разметка и структура

Поля ввода

Кнопки

Блоки выбора

Прогресс и обратная связь

Поля ввода

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

Стилизация конкретного блока по ID

Стилизация prefix / suffix

Метки

Кнопки

Кнопка Continue

Кнопка Previous

Кнопка Submit

Стилизация всех кнопок сразу

Подпись кнопки (description)

Блоки выбора

Стилизация вариантов

Карточки image choice

Скрыть иконку radio / checkbox

Индикаторы прогресса

Индикатор внутри шагов

Индикатор в хедере

Адаптивный дизайн

Состояния и валидация

Стили ошибок

Динамические переменные в тексте

Готовые примеры

Пример 1 — чистая минималистичная тема

Пример 2 — скруглённая яркая тема

Пример 3 — корректировки макета под мобильные

Классы типов блоков