自适应表单组件的内联样式

上次更新： 2023-10-30

主题：
Adaptive Forms
查看有关此主题的更多信息

创建对象：
Intermediate

User

Adobe 建议使用现代、可扩展的数据捕获核心组件，以创建新的自适应表单或将自适应表单添加到 AEM Sites 页面。这些组件代表有关创建自适应表单的重大改进，确保实现令人印象深刻的用户体验。本文介绍了使用基础组件创作自适应表单的旧方法。

版本	文章链接
AEM 6.5	单击此处
AEM as a Cloud Service	本文

您可以通过以下方式指定样式，来定义自适应表单的整体外观和样式：主题编辑器. 此外，您还可以将内联CSS样式应用于各个自适应表单组件并即时预览更改。内联样式会覆盖主题中提供的样式。

应用内联CSS属性

要将内联样式添加到组件，请执行以下操作：

在表单编辑器中打开表单，并将模式更改为样式模式。要将模式更改为样式模式，请在页面工具栏中，点按 > 样式.
在页面中选择组件，然后点按编辑按钮 . 样式属性在侧栏中打开。

您还可以从侧栏中的表单层次结构树中选择组件。表单层次结构树在侧栏中可用作表单对象。

在样式模式中，您可以看到表单对象下列出的组件。但是，侧边栏中的表单对象列表列出了字段和面板等组件。字段和面板是可以包含文本框和单选按钮等组件的常规组件。

从侧栏中选择组件时，您将看到列出的所有子组件以及所选组件的属性。您可以选择特定的子组件并设置其样式。
单击侧边栏中的选项卡以指定CSS属性。您可以指定属性，例如：
- Dimension和位置（显示设置、填充、高度、宽度、边距、位置、z索引、浮动、清除、溢出）
- 文本（字体系列、粗细、颜色、大小、行高和对齐）
- 背景（图像和渐变，背景颜色）
- 边框（宽度、样式、颜色、半径）
- 效果（阴影、不透明度）
- 高级（允许您为组件编写自定义CSS）
同样，可以为组件的其他部分应用样式，例如构件，题注、和帮助.
点按完成确认更改或取消以放弃更改。

示例：字段组件的内联样式

以下图像描述了应用内联样式之前和之后的文本字段。

应用内联样式之前的文本框组件

应用内联样式属性之前的文本框组件

请注意应用以下CSS属性后文本框样式的更改，如下图所示。

选择器	CSS属性	价值	效果
字段	边框	边框宽度=2像素边框样式=实线边框颜色=#1111	在字段周围创建2像素宽的黑色边框
文本框	background-color	#6495ED	将背景颜色更改为CornflowerBlue (#6495ED) 注意：您可以在值字段中指定颜色名称或其十六进制代码。
标签	Dimension和位置>宽度	100px	将标签的宽度固定为100px
字段帮助图标	文本>字体颜色	#2ECC40	更改帮助图标面部的颜色。
详细描述	text-align	居中	将帮助的详细描述调整到中心

应用内联样式后的文本框样式

应用内联样式属性后的文本框组件

按照上述步骤，您可以选择和设置其他组件的样式，如面板、提交按钮和单选按钮。

注意

根据您选择的组件，样式属性会有所不同。

复制并粘贴样式

您还可以在自适应表单中将样式从一个组件复制并粘贴到另一个组件。在样式在模式下，点按组件并点按复制图标 .

点按同一类型的其他组件，然后点按粘贴图标以粘贴复制的样式。您还可以点按“清除样式”图标以清除应用的样式。

为组件的不同状态设置样式

您可以为组件类型的不同状态设置样式。不同的状态包括：焦点，已禁用，悬停，错误，成功、和必需.

要定义组件状态的样式：

在样式在模式中，点按该组件并点按编辑图标 .
使用选择组件的状态状态下拉列表。
为组件的选定状态定义样式，然后点击以保存属性。

您还可以模拟成功和错误状态。点按展开图标以查看 模拟成功 和 模拟错误 选项。

模拟状态

另请参阅

在此页面上

查看下一个：