HTML5 フォームのデフォルトスタイルの変更

HTML5 フォームは HTML5 機能の使用によりレンダリングされ、レンダリングされるフォームのスタイル設定は CSS の使用によって実行されます。HTML5 フォームのデフォルトの外観は、その PDF レンダリングに似ています。開発者はカスタム CSS を使用して、HTML5 フォームのデフォルトの外観を変更できます。

この記事では、HTML5 フォームのスタイルを変更する手順を説明し、 スタイルの概要 この記事では、HTML5 フォームの様々なスタイル設定に関する詳細を説明します。 この記事に記載されている手順を実行する前に、スタイルの概要記事を必ずお読みください。

次の 2 つの画像はデフォルトのスタイルとカスタマイズされたスタイルの違いを示しています。

pictures-002-small

フォームのスタイル設定

  1. カスタムスタイルを追加するプロファイルの選択

    Access the CRX DE interface at the URL: https://<server>:<port>/crx/de and create a profile or choose an existing profile. プロファイルの作成方法については、 新しいプロファイルの作成

  2. HTML5 フォームのスタイル設定用の CSS スタイルシートの作成

    プロファイルレンダラーを作成したフォルダーに移動し、CSS スタイルシートファイルを作成します。次の手順に従います。

    1. フォルダーを右クリックして、メニューから​作成／ファイルを作成​を選択します。

    HTML5 フォームにある特定のコンポーネントに対してどの CSS クラスを作成するかについて詳しくは、「スタイルの概要」を参照してください。

  3. Profile Renderer にスタイルシートを追加する

    CRX DE でプロファイルレンダラーページ（jsp ファイル）を開き、CSS ファイルを XFA クライアントライブラリのすぐ下にあるページに含めます。次の手順を実行して、CSS ファイルをプロファイルに含めます。

    1. レンダラーページで次の行を検索します。

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

    2. 次の行を上記の行の下に挿入して、スタイルシートを含めます。

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

    3. ファイルを保存します。

このページ