可通过以下方式指定样式,来定义自适应表单的整体外观和样式: 主题编辑器. 此外,您还可以将内联CSS样式应用于各个自适应表单组件并动态预览更改。 内联样式会覆盖主题中提供的样式。
要将内联样式添加到组件,请执行以下操作:
在表单编辑器中打开表单,然后将模式更改为样式模式。 要将模式更改为样式模式,请在页面工具栏中,点按 > 样式.
在页面中选择组件,然后点按编辑按钮 . 样式属性在侧栏中打开。
您也可以从侧栏中的表单层次结构树中选择组件。 表单层次结构树在侧栏中可用作表单对象。
在 样式 模式中,您可以看到列在表单对象下的组件。 但是,侧栏中的表单对象列表列出了字段和面板等组件。 字段和面板是可以包含文本框和单选按钮等组件的通用组件。
从侧栏中选择组件时,您将看到列出的所有子组件以及所选组件的属性。 您可以选择特定的子组件并设置其样式。
单击侧栏中的选项卡可指定CSS属性。 您可以指定属性,例如:
同样,您也可以为组件的其他部分应用样式,例如 构件, 题注、和 帮助.
点按 完成 确认更改或 取消 以放弃更改。
以下图像描述了应用内联样式之前和之后的文本字段。
应用内联样式属性之前的文本框组件
请注意应用以下CSS属性后文本框样式的变化,如下图所示。
选择器 |
CSS属性 |
价值 |
效果 |
字段 |
边框 |
边框宽度=2像素 边框样式=实线 边框颜色=#1111 |
在字段周围创建黑色2-px宽边框 |
文本框 |
background-color |
#6495ED |
将背景颜色更改为CornflowerBlue (#6495ED) 注意:您可以在值字段中指定颜色名称或其十六进制代码。 |
标签 |
Dimension和位置>宽度 |
100px |
将标签的宽度固定为100px |
字段帮助图标 | 文本>字体颜色 | #2ECC40 | 更改帮助图标面部的颜色。 |
详细描述 |
text-align |
居中 |
将帮助的详细描述居中对齐 |
应用内联样式属性后的文本框组件
按照上述步骤,您可以选择和设置其他组件的样式,如面板、提交按钮和单选按钮。
样式属性因您选择的组件而异。
您还可以在自适应表单中将样式从一个组件复制并粘贴到另一个组件。 在 样式 在模式中,点按组件并点按复制图标 .
点按同一类型的其他组件,然后点按粘贴图标 以粘贴复制的样式。 您还可以点按“清除样式”图标
以清除应用的样式。
您可以为组件类型的不同状态设置样式。 不同的状态包括: 聚焦, 已禁用, 悬停, 错误, 成功、和 必需.
要定义组件状态的样式,请执行以下操作:
在 样式 模式,点按该组件并点按编辑图标 .
使用选择组件的状态 状态 下拉列表。
为组件的选定状态定义样式,然后点按 以保存属性。
您还可以模拟成功和错误状态。 点按展开图标以查看 模拟成功 和 模拟错误 选项。