更改HTML5表单的默认样式

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

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

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

pictures-002-small

设置表单样式

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

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

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

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

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

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

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

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

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

  3. 在用户档案 Renderer中包含样式表

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

    1. 在呈示器页面中搜索以下行:

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

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

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

    3. 保存文件。

On this page

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
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now