更改HTML5表单的默认样式

使用HTML5功能渲染HTML5表单,使用CSS完成渲染表单的样式设置。 HTML5表单的默认外观与其PDF再现类似。 开发人员可以使用自定义CSS更改HTML5表单的默认外观。

本文提供更改HTML5表单样式的分步信息,样式简介文章包含有关HTML5表单各种样式方面的详细信息。 确保在执行本文所述的步骤之前阅读样式文章的简介。

以下两幅图像显示了默认样式和自定义样式之间的差异。

图片-002-small

设置表单样式

  1. 选择用户档案以添加自定义样式

    访问URL上的CRX DE界面:https://<server>:<port>/crx/de​并创建用户档案或选择现有用户档案。 要了解如何创建用户档案,请参阅创建新用户档案

  2. 创建用于设置HTML5表单样式的CSS样式表

    导览至创建用户档案渲染器的文件夹,并创建CSS样式表文件。 要执行的步骤包括

    1. 右键单击文件夹,然后从菜单中选择​create > 创建文件

    2. 在“创建文件”对话框中,输入样式表的名称。 确保使用扩展名。css(例如stylesheet.css)

    3. 在导航窗格中,打开已创建的CSS文件。

    4. 定义要设置样式的组件的CSS类,并在这些类中添加样式。

    要了解要在HTML5表单中为特定组件创建哪些CSS类,请参阅样式简介

  3. 在用户档案渲染器中包含样式表

    在CRX DE中打开“用户档案渲染器”页(jsp文件),并在XFA客户端库正下方的页面中包含CSS文件。 执行这些步骤以将CSS文件包含在用户档案中。

    1. 在渲染器页面中搜索以下行:

      <cq:includeclientlib categories="xfaforms.profile" />

    2. 在上面的行下面插入以下内容,以包含样式表:

      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css" />

    3. 保存文件。

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free