某些 Creative Cloud 应用程序、服务和功能在中国不可用。
The HTML5 rendition of a form template is made up of several HTML elements arranged in a particular order. Every element has well-defined CSS classes associated with it. One can modify the CSS classes to change the appearance of the elements.
Note:
In the CSS classes, do not change the position and size attributes, such as, width, height, border-thickness, top, left, right, bottom, padding, and margin. Changing position and size attributes impacts the layout of a form.
Every element contains well-defined CSS classes. You can modify these classes to change the appearance of the elements. Every element, except the field and draw elements, has two classes. These classes are:
- Type class: This class represents the type of XFA field. You can override the type class to modify the styles of all elements of a particular type.
- Name class: This class corresponds to the name of the XFA field. You can override the name class to modify the style of a particular element.
Note:
Some XFA elements do not have a name. To change the styles of such components, modify all the components of that particular type.
For the pages not named in the LiveCycle Designer, pages in a Mobile form are named in the increasing order of their number. For example, for a Mobile Form containing two pages, page names would be Page1, Page2.
The field element contains two nested elements: widget and caption.
Widget element
The widget element contains the user interface element for interaction with users. It has three CSS classes:
- Widget: Every widget has this class.
- name: All the widgets shipped with Adobe LiveCycle contain the widget name class. For custom widgets, the widget developer provides the Widget name class.
- type: Every widget has a user interface element. This class defines the type of the user interface element.
<!--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>
Besides the type and name class, the field component also contains an additional CSS class named subtype. A subtype identifies which type of field it is, for example, NumericField, DateField, TextField. You can override the subtype class to modify the styling of all the fields of type, subtype.
| Component | Type | Name |
| Page | page | User-defined name or Page<pageNumber> (default) |
| Content Area | contentarea | User-defined name |
| Subform | subform | User-defined name |
| Exclusion Group | exclgroup | User-defined name |
| Draw | draw | User-defined name |
| Field | field | User-defined name |
| Caption | caption | NA |
| Widget | widget | The widget developer defines it (For user-defined widgets see the table in the following section) |
The Form Designer supports different types of fields in a form like NumericField, DecimalField, and Date Field. All of these fields in HTML contain the above mentioned CSS classes. They also contain some extra classes depending on the type of field.
Every field has an associated widget representing the UI element. The classes of each field and the widgets associated with each field are listed below.
| Field Type | Subtype | Widget Name | Widget Type | HTML UI Tag |
| Button |
NA | xfaButton |
buttonfieldwidget |
input type=button |
| CheckButton |
checkboxfield |
XfaCheckBox |
checkboxfieldwidget |
input type=checkbox |
| DateField |
datefield |
dateField |
datefieldwidget |
input type=text |
| DateTimeField |
textfield |
textField |
textfieldwidget | input type=text |
| DecimalField |
numericfield |
numericInput |
numericfieldwidget |
input type=text |
| DropDown |
choicelist |
dropDownListWidget |
choicelistwidget |
select |
| ListBox |
choicelist |
listBoxWidget |
choicelistwidget |
ol |
| NumericField |
numericfield |
numericInput |
numericfieldwidget |
input type=text |
| PasswordField |
passwordfield |
defaultWidget |
passwordfieldwidget |
input type=password |
| RadioButton |
radiofield |
XfaCheckBox |
radiofieldwidget |
input type=radio |
| TextField |
textfield |
textField |
textfieldwidget |
input type=text |
| TimeField |
textfield |
textField |
textfieldwidget |
input type=text |
You can insert static draw elements like text, and images, using the Livecycle Form Designer. For each draw element, a separate CSS class is associated with that element. The list of CSS classes for draw elements is listed below. Every draw element has a draw class associated with it.
Besides the appearance of UI components in the HTML form, you can change the style of elements like Inline Errors, Inline Warnings, and fields with validation errors.
Styling Inline Errors
When the validation of a field results in an error, an inline error is displayed when the field in active. To change the style of inline errors, override the CSS ID error-msg.
Styling Inline Warnings
When the validation of a field results in a warning, an inline warning is displayed when the field is active. To change the style of these inline warnings, override the CSS ID warning-msg.
Styling Fields with Validation Errors
When validation for a field fails, the style of the widget changes. This style change is done by applying a CSS class widgetError on the widget component. To modify the default styling, override the widgetError class.