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

LanderLab 让你可以可视化地设计测验，但如果你需要更多控制权，可以使用 Custom CSS（自定义 CSS）在内置设置之外为测验设置样式。当你想要微调测验元素的外观，或应用编辑器中没有提供的样式时，这非常有用。

工作原理

LanderLab 允许你向流程中注入自定义 CSS。你的 CSS 会自动限定在 .ll-quiz 根容器内，因此样式只会影响你的测验，绝不会影响页面的其他部分。

在哪里添加 CSS

LanderLab 测验编辑器中 Settings 下的 Custom CSS 面板

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

✗ 错误做法：变量是只读的

/* 这样不会生效 */
.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

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

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

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

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

按钮

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

按钮副标签（描述）

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

选项区块

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

选项样式

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

图片选择卡片

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

隐藏单选框/复选框图标

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

进度条

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

内嵌进度条

/* 轨道 */
.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;
}

页眉进度条

.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：宽于此值的视为桌面端，窄于此值的视为移动端。 容器查询语法

/* 桌面端（宽于 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 类。使用该类可以让错误状态的样式与你的设计保持一致。

错误样式

/* 高亮输入框外层容器 */
.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 元素。

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

完整示例

将以下任意示例粘贴到你的 Custom CSS 面板中，即可快速上手。

示例 1：简洁极简主题

/* 输入框 */
.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：圆润多彩主题

/* 输入框 */
.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：移动优先的布局调整

@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`	倒计时器

​工作原理

​在哪里添加 CSS

​作用域规则

​选择器参考

​布局与结构

​输入框

​按钮

​选项区块

​进度与反馈

​输入字段

​为所有输入字段设置样式

​通过 ID 定位特定区块

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

​标签

​按钮

​Continue 按钮

​Previous 按钮

​Submit 按钮

​一次性为所有按钮设置样式

​按钮副标签（描述）

​选项区块

​选项样式

​图片选择卡片

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

​进度条

​内嵌进度条

​页眉进度条

​响应式设计

​状态与校验

​错误样式

​动态文本变量

​完整示例

​示例 1：简洁极简主题

​示例 2：圆润多彩主题

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

​区块类型类名列表

工作原理

在哪里添加 CSS

作用域规则

选择器参考

布局与结构

输入框

按钮

选项区块

进度与反馈

输入字段

为所有输入字段设置样式

通过 ID 定位特定区块

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

标签

按钮

Continue 按钮

Previous 按钮

Submit 按钮

一次性为所有按钮设置样式

按钮副标签（描述）

选项区块

选项样式

图片选择卡片

隐藏单选框/复选框图标

进度条

内嵌进度条

页眉进度条

响应式设计

状态与校验

错误样式

动态文本变量

完整示例

示例 1：简洁极简主题

示例 2：圆润多彩主题

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

区块类型类名列表