NueForm

自定义 CSS

通过自定义 CSS 选择器、CSS 变量和逐元素样式，完全控制 NueForm 表单和 Fuse 活动的外观。

概述

自定义 CSS 让您完全控制表单和 Fuse 活动的视觉外观。NueForm 提供了一套全面的 CSS 类选择器和 CSS 自定义属性（变量），您可以在自定义样式中使用。

添加自定义 CSS

NueForm（标准表单）

  1. 在构建器中打开您的表单。
  2. 导航到设置面板中的设计标签。
  3. 滚动到自定义 CSS 部分。
  4. 输入您的 CSS 规则。
  5. 更改会立即反映在实时预览中。

Fuse 活动

  1. 在构建器中打开您的 Fuse 活动。
  2. 导航到设计标签。
  3. 滚动到自定义 CSS 部分。
  4. CSS 编辑器会显示特定于您所选活动类型的选择器。

NueForm CSS 选择器

以下选择器可用于标准表单：

布局与容器

选择器描述
.fc-container主表单容器。这是包裹整个表单的根元素。
.fc-welcome欢迎页面容器。
.fc-thankyou感谢页面容器。
.fc-progress-bar进度条轨道（背景条）。
.fc-progress-fill进度条的已填充部分（显示当前进度）。

问题元素

选择器描述
.fc-question-title问题标题文本。包括问题编号和富文本内容。
.fc-question-description标题下方的问题描述文本。
.fc-question-number问题编号前缀（例如"1 ->"）。

交互元素

选择器描述
.fc-button表单中的主要按钮（确定、开始、提交）。
.fc-input填写者输入答案的文本输入框和文本区域。
.fc-choice单个选项容器（多选、下拉选项）。
.fc-choice.selected当前被选中的选项。
.fc-rating-icon单个评分图标（星星、爱心、拇指等）。
.fc-scale-item意见量表和 NPS 量表上的单个项目。

品牌

选择器描述
.fc-top-logo顶部 Logo 容器。
.fc-watermark水印或左下角 Logo 元素。

示例

css
/* 使按钮完全圆角 */
.fc-button {
  border-radius: 9999px;
}

/* 为输入框添加更粗的底部边框 */
.fc-input {
  border-bottom-width: 3px;
}

/* 为选项添加悬停滑动效果 */
.fc-choice:hover {
  transform: translateX(4px);
}

/* 设置选中选项的样式 */
.fc-choice.selected {
  border-color: var(--fc-accent);
  background-color: var(--fc-accent-10);
}

/* 增加进度条高度 */
.fc-progress-bar {
  height: 6px;
}

Fuse 活动 CSS 选择器

Fuse 活动有其专属的 CSS 选择器，分为通用、共享活动和活动特定类别。

通用选择器

适用于所有 Fuse 活动：

选择器描述
.fuse-containerFuse 页面的根容器。
.fuse-title活动标题。
.fuse-description活动描述文本。
.fuse-activity-area活动小部件周围的包装器。
.fuse-live-badge实时参与者计数徽章。
.fuse-participant-bar参与者头像行。
.fuse-join-screen活动前显示的加入/输入名称页面。
.fuse-activity-indicator浮动活动指示器通知。

共享活动选择器

这些选择器在多种活动类型间共享：

选择器描述
.fuse-option选项按钮（用于投票）。
.fuse-option-label选项内的文本标签。
.fuse-option-percentage选项内的百分比显示。
.fuse-option-votes选项内的投票计数文本。
.fuse-total-count总票数摘要文本。
.fuse-input活动中的文本输入框。
.fuse-submit-btn提交/添加按钮。
.fuse-hint辅助或说明文本。
.fuse-list-item列表类活动中的项目卡片。
.fuse-item-text列表项目内的文本内容。
.fuse-item-author列表项目上的贡献者名称。
.fuse-score点赞/点踩分数显示。
.fuse-upvote点赞按钮。
.fuse-downvote点踩按钮。
.fuse-stat-value统计显示值（如平均值、中位数）。
.fuse-stat-label统计显示标签。
.fuse-histogram分布图容器。
.fuse-histogram-bar直方图中的单个柱。
.fuse-champion获胜者/冠军显示元素。
.fuse-consensus共识部分显示。
.fuse-round-label轮次标题文本（多轮活动）。
.fuse-rank-number排名位置徽章。
.fuse-status状态或计数文本。

活动特定选择器

每种活动类型都有独特的选择器：

经典投票

选择器描述
.fuse-classic-poll经典投票根容器。
.fuse-poll投票选项容器。
.fuse-poll--bar-chart柱状图显示模式修饰符。
.fuse-bar单个柱状图列。
.fuse-bar-label柱状图标签文本。

多选投票

选择器描述
.fuse-multi-vote-poll多选投票根容器。

图片投票

选择器描述
.fuse-image-poll图片投票根容器。

排名投票

选择器描述
.fuse-ranked-poll排名投票根容器。

淘汰投票

选择器描述
.fuse-elimination-poll淘汰投票根容器。

热辣观点

选择器描述
.fuse-hot-takes热辣观点根容器。
.fuse-statement正在辩论的声明文本。
.fuse-tug-bar拔河可视化条。
.fuse-percentage--agree同意百分比显示。
.fuse-percentage--disagree不同意百分比显示。
.fuse-vote-btn--agree同意按钮。
.fuse-vote-btn--disagree不同意按钮。

你更愿意 / 二选一

选择器描述
.fuse-would-you-rather"你更愿意"根容器。
.fuse-this-or-that"二选一"根容器。
.fuse-panel--left左侧选项面板。
.fuse-panel--right右侧选项面板。
.fuse-panel-label面板标签文本。
.fuse-panel-percentage面板百分比显示。

滑动量表

选择器描述
.fuse-sliding-scale滑动量表根容器。
.fuse-slider滑块轨道元素。
.fuse-slider-value当前滑块值显示。
.fuse-slider-label最小/最大标签文本。
.fuse-stats统计信息容器。

词云

选择器描述
.fuse-word-cloud词云根容器。
.fuse-cloud云容器。
.fuse-word云中的单个词。

协作列表

选择器描述
.fuse-collaborative-list协作列表根容器。

排名列表

选择器描述
.fuse-ranked-list排名列表根容器。

评分与揭晓

选择器描述
.fuse-rate-and-reveal评分与揭晓根容器。

利弊分析

选择器描述
.fuse-pros-and-cons利弊分析根容器。
.fuse-side-column单个利或弊列。

Top N

选择器描述
.fuse-top-nTop N 根容器。

预测

选择器描述
.fuse-predictions预测根容器。

看图说话

选择器描述
.fuse-caption-this看图说话根容器。

地图标记

选择器描述
.fuse-map-pins地图标记根容器。

问答板

选择器描述
.fuse-qa-board问答板根容器。

等级列表

选择器描述
.fuse-tier-list等级列表根容器。
.fuse-tier-row单个等级行。
.fuse-tier-label等级标签文本（S、A、B、C、D、F）。
.fuse-tier-item等级内的单个项目。
.fuse-tier-badge等级上的项目计数徽章。

对决

选择器描述
.fuse-bracket对决根容器。
.fuse-matchup对决容器。
.fuse-matchup-entry单个对决选项。
.fuse-matchup-label对决选项标签。
.fuse-matchup-votes对决投票计数显示。

CSS 自定义属性（变量）

除了类选择器外，您还可以在规则中引用 CSS 自定义属性。这些由主题系统设置，会适应每个表单的配置。

变量描述
var(--fc-title-color)标题文本颜色。
var(--fc-description-color)描述文本颜色。
var(--fc-option-color)活动/选项文本颜色。
var(--fc-font-question)标题字体系列。
var(--fc-font-description)描述字体系列。
var(--fc-font-option)活动/选项字体系列。
var(--fc-accent)强调/主题颜色。
var(--fc-bg)背景颜色。
var(--fc-text)主要文本颜色。
var(--fc-btn-bg)按钮背景颜色。
var(--fc-btn-text)按钮文本颜色。
var(--fc-border)边框颜色。
var(--fc-input-bg)输入框背景颜色。
var(--fc-muted)静音/次要文本颜色。
var(--fc-indicator-bg)活动指示器背景颜色。
var(--fc-indicator-text)活动指示器文本颜色。
var(--fc-font-indicator)活动指示器字体系列。

在自定义 CSS 中使用 CSS 变量

您可以在自定义 CSS 中引用这些变量，创建适应表单主题的样式：

css
/* 使用主题强调色的自定义边框 */
.fc-choice {
  border: 2px solid var(--fc-accent-30);
}

/* 使用主题颜色的自定义输入框样式 */
.fc-input {
  background-color: var(--fc-input-bg);
  border-color: var(--fc-border);
}

/* 具有主题感知样式的 Fuse 活动 */
.fuse-option {
  border: 1px solid var(--fc-border);
  border-radius: 20px;
}

逐问题自定义类

除了表单级自定义 CSS，您还可以为单个问题及其媒体元素添加自定义 CSS 类名：

  • 问题自定义类名（customClassName）：应用于问题容器。
  • 媒体自定义类名（media.customClassName）：应用于媒体元素。

这让您可以在 CSS 中针对特定问题：

css
/* 仅对"hero"问题设置不同样式 */
.hero-question .fc-question-title {
  font-size: 3rem;
  text-align: center;
}

然后在构建器中将问题的自定义类名设为 hero-question。

提示和最佳实践

  1. 使用 CSS 变量：引用 var(--fc-accent) 和其他主题变量，而不是硬编码颜色。这确保您的自定义样式在主题更改时能够自适应。
  2. 在预览中测试：添加自定义 CSS 后，始终预览表单以验证样式在桌面端和移动端都正确显示。
  3. 特异性：NueForm 的内置样式使用低特异性。在大多数情况下，您的自定义 CSS 应该能够覆盖它们，无需使用 !important。
  4. 响应式设计：如果需要在移动端和桌面端使用不同样式，在自定义 CSS 中使用媒体查询。
  5. 避免破坏布局：谨慎使用 position、display 和 overflow 等可能破坏表单布局的属性。

示例：完整自定义主题

css
/* 圆角卡片式问题 */
.fc-container {
  padding: 2rem;
}

/* 胶囊型按钮 */
.fc-button {
  border-radius: 9999px;
  padding: 12px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 下划线式输入框 */
.fc-input {
  border: none;
  border-bottom: 2px solid var(--fc-border);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
}

.fc-input:focus {
  border-bottom-color: var(--fc-accent);
}

/* 带悬停效果的选项卡片 */
.fc-choice {
  border-radius: 12px;
  transition: all 0.2s ease;
}

.fc-choice:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 更大的评分图标 */
.fc-rating-icon {
  font-size: 2rem;
}

/* 低调的进度条 */
.fc-progress-bar {
  height: 3px;
  opacity: 0.5;
}
最后更新：2026年4月6日