为HTML5表单创建CSS样式 creating-css-styles-for-html-forms
基于XFA的表单模板的HTML5演绎版包含多个HTML元素。 这些元素按顺序排列。 每个元素都有明确定义的CSS类。 您可以使用这些CSS类选择和更改元素的外观。
CSS类 用于元素 css-classes-nbsp-for-elements-nbsp
每个元素都包含明确定义的CSS类。 可以修改这些类以更改元素的外观。 每个元素（字段和绘制元素除外）都有两个CSS类 — Type类和Name类。
-
Type类 表示XFA字段的类型。 您可以覆盖
type类以修改特定类型的所有元素的样式。 -
Name类 对应于XFA字段的名称。 您可以覆盖
name类以修改自定义样式并将其应用于元素。
对于AEM Forms Designer中未命名的页面，HTML5表单中的页面将按其数量的递增顺序进行命名。 例如，对于具有两个页面的HTML5表单，这些页面将命名为Page1、Page2。
字段元素 field-element
字段元素包含两个嵌套元素：小部件和标题。
小组件元素
构件元素包含用于与用户交互的用户界面元素。 它有三个CSS类：
- 小组件：每个小组件都有此类。
- name： AEM随附的所有构件都包含构件名称类。 对于自定义构件，构件开发人员提供构件名称类。
- 类型：每个小组件都有一个用户界面元素。 此类定义用户界面元素的类型。
<!--field with caption-->
<div class="field numericfield NumericField3 ">
<div class="caption">
caption content
</div>
<div class="widget numericfieldwidget numericInput">
widget content
</div>
</div>
<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
widget content
</div>
除了类型和名称类之外，字段组件还包含一个名为 子类型 的附加CSS类。 子类型标识它的字段类型，例如NumericField、DateField、TextField。 可以覆盖子类型类来修改所有类型、子类型字段的样式。
不同组件的CSS类 css-classes-for-different-components
不同字段的CSS类 css-classes-for-different-fields
AEM Forms Designer支持表单中各种类型的字段，如NumericField、DecimalField和Date Field。 HTML中的所有字段都包含上述CSS类。 它们还包含一些额外的类，具体取决于字段类型。
每个字段都有一个表示UI元素的关联构件。 下面列出了每个字段的类以及与每个字段关联的构件。
其他Draw元素的CSS类 css-classes-for-different-draw-elements
您可以使用AEM Forms Designer插入静态绘制元素，如文本和图像。 对于每个绘制元素，单独的CSS类与该元素关联。 绘制元素的CSS类列表如下所列。 每个绘制元素都有一个与之关联的绘制类。
设置窗体其他部分的样式 styling-other-parts-of-the-form
除了HTML表单中UI组件的外观之外，您还可以更改元素的样式，如内联错误、内联警告和有验证错误的字段。
Styling Inline Errors
如果字段的验证导致错误，则字段处于活动状态时会显示内联错误。 要更改内联错误的样式，请覆盖CSS ID error-msg。
Styling Inline Warnings
当字段的验证导致警告时，如果字段处于活动状态，则显示内联警告。 若要更改这些内联警告的样式，请覆盖CSS ID warning-msg。
Styling Fields with Validation Errors
当字段验证失败时，小组件的样式会更改。 此样式更改通过在构件组件上应用CSS类 widgetError 来完成。 要修改默认样式，请覆盖 widgetError 类。