---
title: "フォーム要素スタイリングのためのオートコンプリートリスト作成"
slug: "creating-an-autocomplete-list-for-form-element-styling"
abstract: "スタイリング用のあらかじめ定義されたリストを作成するCSSスタイリング機能の概要。"
---
# フォーム要素スタイリングのためのオートコンプリートリスト作成

フォームにスタイルを適用するには、フォームデザイナーが [手動でCSS名(](https://doc.sitecore.com/xp/en/users/104/sitecore-experience-platform/change-the-styling-of-a-form.html)例えばbtn-primary)を入力できます。ただし、これにはCSSクラスの知識が必要であり、タイプミスが起こりやすいです。より簡単にするために、各フィールドタイプごとに利用可能なCSSクラスの選択肢を、フォームデザイナーが選択できる分かりやすい名前を使ってリストを作成することができます。以下の画像に示されています。

![CSS class options available for a form element](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/SubmitButtonTesting.png)

> !注SitecoreフォームはデフォルトでCSSクラスオプションを提供していません。フォームデザイナーはCSSクラスフィールドを入力できますが、提案は提示されません。

自分のスタイルシートや、例えばBootstrapなどのCSSフレームワークに基づいてCSSクラスオプションを設定することができます。これは「 [Walkthrough: Creating Bootstrap CSS class options」で示されているように、ボタン要素をスタイリングするための](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-bootstrap-css-class-options-to-style-a-button-element.html "Walkthrough: Creating Bootstrap CSS class options to style a Button element")方法です。

手動で定義されたCSSクラスとオートコンプリートリストのCSSクラスオプションは、2つの別々のフィールドに保存されています(*sitecore/Forms/*

コンテンツタブに記載されています。つまり、既存のフォームに手動で入力したCSSクラスは、Sitecore 10.1以降に移行しても保持されます。

![CSS class fields on the Content tab](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/CSSclassfields.png)