更改HTML5表單的預設樣式

HTML5表單是使用HTML5功能呈現，而呈現表單的樣式是使用CSS完成。 HTML5表單的預設外觀與其PDF轉譯類似。 開發人員可使用自訂CSS來變更HTML5表單的預設外觀。

本文提供變更HTML5表單樣式的逐步資訊，而樣式簡介文章則包含HTML5表單各樣式方面的詳細資訊。 請務必先閱讀樣式文章的簡介，再執行本文提及的步驟。

以下兩張影像顯示預設樣式和自訂樣式之間的差異。

圖片–002 — 小

設定表單樣式

  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. 在描述檔轉譯器中加入樣式表

    在CRX DE中開啟「描述檔轉譯器」頁面（jsp檔案），並將CSS檔案包含在XFA用戶端程式庫正下方的頁面中。 執行這些步驟以將CSS檔案包含在設定檔中。

    1. 在轉譯器頁面中搜尋下列行：

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

    2. 在上面的行下插入以下內容以包括樣式表：

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

    3. 儲存檔案。

本頁內容