### [フォームフィールドのプレースホルダーテキストのスタイル設定方法](https://wpforms.com/developers/style-placeholder-text-for-form-fields/)
**公開日:** 2019年10月14日
**著者:** エディトリアルチーム
**抜粋:** このCSSスニペットは、カスタムブランディングに合わせてプレースホルダーテキストのスタイルを設定するのに役立ちます。
**コンテンツ:**
WPFormsのフォームフィールドのプレースホルダーテキストの外観をカスタマイズすることに興味がありますか？カスタムCSSを数行追加するだけで、簡単に実現できます。プレースホルダーテキストは、フィールド内の一時的な情報として機能し、ユーザーがフィールドを操作すると消えます。次の記事では、フォームフィールドのプレースホルダーテキストのスタイル設定プロセスを説明します。
プレースホルダーテキストのデフォルトのスタイルは、WordPressテーマ、WPFormsの設定（設定による）、またはユーザーのブラウザ設定など、さまざまなソースから継承される可能性があることに注意してください。
プレースホルダーのスタイル設定を開始する前に、まずこのテキストを使用するフォームを作成する必要があります。フォームを作成したら、フィールド設定の**詳細**タブから各フィールドの**プレースホルダー**テキストを追加する必要があります。
プレースホルダーテキストの追加にヘルプが必要な場合は、[こちらのドキュメントをご覧ください](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/ "フォームフィールドにプレースホルダーテキストを追加する方法")。
## プレースホルダーテキストのスタイル設定
プレースホルダーテキストのスタイルを設定する場合、ベンダープレフィックス付きのセレクターをいくつか含めることが重要です。これにより、スタイルがさまざまなブラウザやバージョンで一貫して適用されます。CSSは繰り返しのように見えるかもしれませんが、包括的なブラウザサポートのためにすべてのセレクターを含めることが不可欠です。
これらのスタイルをサイトに実装するには、次のCSSを追加するだけです。カスタムCSSをどこに追加すればよいかわからない場合は、このトピックに関するチュートリアルを参照してください。
以下のCSSは、すべてのWPFormsプレースホルダーテキストをオレンジ色（#e27730）に変更します。
```
.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
color: #e27730 !important;
}
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #e27730 !important;
opacity: 1 !important;
}
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #e27730 !important;
opacity: 1 !important;
}
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #e27730 !important;
}
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
color: #e27730 !important;
}
.wpforms-container ::placeholder {
color: #e27730 !important;
}
```
Firefoxは、すべてのフォームフィールドのプレースホルダーに自動的に低い[不透明度](https://www.w3.org/TR/css-color-4/#color-contrast "CSS opacity Property")を適用し、他のブラウザよりも透明度が高くなります。
これは、Firefox固有のCSSの不透明度を**opacity: 1;**に設定することで、上記のCSSですでに処理されています。
これで、プレースホルダーテキストのスタイルを設定する準備が整いました。確認メッセージのスタイルをCSSで変更したいですか？チュートリアル「[確認メッセージボックスのスタイルを削除する方法](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "確認メッセージボックスのスタイルを削除する方法")」では、このスタイルを変更する方法を説明します。
## FAQ
#### Q: このCSSを使用してドロップダウンフィールドのスタイルを設定できますか？
**A:** **ドロップダウン**フィールドのスタイルを設定したい場合は、[代わりにこちらの記事をご覧ください](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "ドロップダウンフィールドのスタイル設定方法")。
**カテゴリ:** スタイリング
**タグ:** CSS、プレースホルダーテキスト
---