> ## 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.

# 使用自定义 CSS 定制你的页面

> 了解如何在 LanderLab 测验中使用自定义 CSS，在内置设计设置之外为测验步骤、输入框、下拉框等元素设置样式。

LanderLab 让你可以可视化地设计测验，但如果你需要更多控制权，可以使用 **Custom CSS**（自定义 CSS）在内置设置之外为测验设置样式。

当你想要微调测验元素的外观，或应用编辑器中没有提供的样式时，这非常有用。

## 工作原理

LanderLab 允许你向流程中注入自定义 CSS。你的 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="LanderLab 测验编辑器中 Settings 下的 Custom CSS 面板" 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}
/* 这样不会生效 */
.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**

所有文本输入框和下拉选择框

**.ll-quiz-block\_\_input-wrapper**

输入框外层的包裹 div

**.ll-quiz-block\_\_label**

字段标签

**.ll-quiz-block\_\_decorator**

前缀/后缀图标或文本

### **按钮**

**.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**

单个多项选择选项

**.ll-choice-option:has(input:checked)**

已选中的选项

**.ll-choice-option\_\_text**

选项内的文本标签

**.ll-img-choice-option**

图片选择选项卡片

**.ll-img-choice-option:has(input:checked)**

已选中的图片选择卡片

**.ll-choice-label**

选项区块的分组标签

### **进度与反馈**

**.ll-quiz-progress\_\_fill**

进度条的填充部分

**.ll-quiz-header\_\_progress-fill**

页眉进度条的填充部分

**.ll-quiz-block--has-error**

校验失败的区块

**.ll-quiz-block-error**

错误消息文本

**.ll-quiz-variable**

文本中的动态变量（例如名字）

## 输入字段

所有文本输入框、下拉选择框、多行文本框及类似字段共享相同的类结构。定位 `.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 定位特定区块

在 LanderLab 中编辑区块时，可以从 URL 中找到区块 ID（例如 `text-field-abc123`）。

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

### 为前缀/后缀装饰元素设置样式

```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;
}
```

### 按钮副标签（描述）

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

## 选项区块

多项选择和图片选择的选项可以分别设置默认、悬停和选中状态的样式。

### 选项样式

```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;
}

/* 选中状态 */
.ll-choice-option:has(input:checked) {
  background-color: #e6f9f3;
  border-color: #18c085;
}
```

### 图片选择卡片

```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);
}
```

### 隐藏单选框/复选框图标

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

## 进度条

进度条有两个位置：一个内嵌在步骤中，另一个位于页眉。你可以分别或统一设置它们的样式。

### 内嵌进度条

```text theme={null}
/* 轨道 */
.ll-quiz-progress--bar {
  background-color: #e8e8e8;
  border-radius: 99px;
  height: 8px;
}

/* 填充 */
.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 容器查询**，而不是媒体查询。请始终使用下面的容器语法，标准的 `@media` 查询在测验容器中无法按预期工作。

断点为 **490px**：宽于此值的视为桌面端，窄于此值的视为移动端。

**容器查询语法**

```text theme={null}
/* 桌面端（宽于 490px） */
@container quiz-container (inline-size > 490px) {
  .ll-quiz-continue-button {
    font-size: 18px;
    padding: 16px 40px;
  }
}

/* 移动端（490px 及以下） */
@container quiz-container (inline-size <= 490px) {
  .ll-quiz-continue-button {
    width: 100%;
    font-size: 15px;
  }

  /* 在移动端隐藏某个区块 */
  #my-block-id {
    display: none;
  }
}
```

**不要使用 @media 查询**

请使用 `@container quiz-container (...)` 代替 `@media (...)`。测验是一个容器组件，媒体查询无法反映它的实际宽度。

## 状态与校验

当某个字段校验失败时，它会获得 `.ll-quiz-block--has-error` 类。使用该类可以让错误状态的样式与你的设计保持一致。

### 错误样式

```text theme={null}
/* 高亮输入框外层容器 */
.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);
}

/* 设置输入框本身的样式 */
.ll-quiz-block--has-error .ll-quiz-block__input {
  color: #c0392b;
}

/* 设置错误消息文本的样式 */
.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}
/* 输入框 */
.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 按钮 */
.ll-quiz-continue-button {
  background-color: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.ll-quiz-continue-button:hover {
  background-color: #333;
}

/* 选项 */
.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}
/* 输入框 */
.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 按钮 */
.ll-quiz-continue-button,
.ll-quiz-submit-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
}

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

/* 已选中的选项 */
.ll-choice-option:has(input:checked) {
  background-color: #eef2ff;
  border-color: #6366f1;
}
```

### 示例 3：移动优先的布局调整

```text theme={null}
@container quiz-container (inline-size <= 490px) {
  /* 移动端全宽按钮 */
  .ll-quiz-continue-button,
  .ll-quiz-submit-button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* 增大选项的点击区域 */
  .ll-choice-option {
    padding: 14px 16px;
    min-height: 52px;
  }

  /* 稍大的输入文字 */
  .ll-quiz-block__input {
    font-size: 16px; /* 防止 iOS 在聚焦时缩放 */
  }
}
```

## 区块类型类名列表

在 `.ll-quiz-block` 上使用这些修饰符来定位各个区块类型。

| **修饰类** | **区块类型** |
| :- | :- |
| `.ll-quiz-block--text-field` | 文本输入框 |
| `.ll-quiz-block--email-field` | 邮箱输入框 |
| `.ll-quiz-block--phone-number-field` | 电话输入框 |
| `.ll-quiz-block--number-field` | 数字输入框 |
| `.ll-quiz-block--textarea-field` | 多行文本框 |
| `.ll-quiz-block--select-field` | 下拉选择框 |
| `.ll-quiz-block--date-field` | 日期选择器 |
| `.ll-quiz-block--checkbox-field` | 复选框 |
| `.ll-quiz-block--range-slider` | 范围滑块 |
| `.ll-quiz-block--multiple-choice` | 多项选择 |
| `.ll-quiz-block--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` | 折叠面板 |
| `.ll-quiz-block--countdown` | 倒计时器 |


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