> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Custom CSS в квизе LanderLab: стилизуйте шаги, поля, кнопки и варианты ответов сверх встроенных настроек дизайна. Селекторы, примеры и container queries.

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

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

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

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

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

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/nZqgRHMCi_31GFLg/images/css.png?fit=max&auto=format&n=nZqgRHMCi_31GFLg&q=85&s=8817775ebae44849d4a54a2b12073a74" alt="Панель Custom CSS в настройках редактора квиза LanderLab" width="1920" height="989" data-path="images/css.png" />
</Frame>

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

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

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

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

**✓ Так делать нужно**

```text theme={null}
.ll-quiz-continue-button {
  background-color: #ff6600;
  color: #ffffff;
  border-radius: 50px;
}
```

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

```text theme={null}
/* 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**

```text theme={null}
.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 theme={null}
#text-field-abc123 .ll-quiz-block__input {
  font-size: 20px;
  border-color: #ff6600;
}
```

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

```text theme={null}
.ll-quiz-block__decorator--prefix {
  color: #888;
  font-size: 14px;
}

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

### Метки

```text theme={null}
.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

```text theme={null}
.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

```text theme={null}
.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

```text theme={null}
.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;
}
```

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

```text theme={null}
.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)

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

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

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

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

```text theme={null}
.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

```text theme={null}
.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

```text theme={null}
.ll-choice-option__custom-input {
  display: none;
}
```

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

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

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

```text theme={null}
/* 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;
}
```

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

```text theme={null}
.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**

```text theme={null}
/* 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`. Используйте его, чтобы оформить состояния ошибок в стиле вашего дизайна.

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

```text theme={null}
/* 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).

```text theme={null}
.ll-quiz-variable {
  color: #18c085;
  font-weight: 600;
}
```

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

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

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

```text theme={null}
/* 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 — скруглённая яркая тема

```text theme={null}
/* 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 — корректировки макета под мобильные

```text theme={null}
@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` | Таймер обратного отсчёта |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.