フォームフィールドのプレースホルダーテキストのスタイル設定方法

WPFormsのフォームフィールドのプレースホルダテキストの外観をカスタマイズすることに興味がありますか？数行のカスタムCSSで簡単に実現できます。プレースホルダーテキストはフィールド内の一時的な情報として機能し、ユーザーがフィールドとインタラクトすると消えます。次の記事では、フォームフィールドのプレースホルダテキストをスタイリングする手順を説明します。

プレースホルダ・テキストのデフォルト・スタイルは、WordPressテーマ、WPFormsの設定（設定による）、ユーザーのブラウザ設定など、さまざまなソースから継承される可能性があることに留意してください。

プレースホルダーのスタイリングを始める前に、まずこのテキストを使用するフォームを作成する必要があります。フォームを作成したら、フィールド設定の詳細タブから各フィールドにプレースホルダーのテキストを追加する必要があります。

プレースホルダー・テキストをスタイリングする

プレースホルダー・テキストにスタイルを設定する場合、複数のセレクタを含めることが不可欠です。これにより、異なるブラウザやバージョン間でスタイルが一貫して適用されるようになります。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はすべてのフォームフィールドのプレースホルダに自動的に低い不透明度を適用し、他のブラウザよりも透明にします。

これは、Firefox固有のCSSの不透明度をopacity: 1に設定することで、上記のCSSですでに対処されている；

以上でプレースホルダー・テキストのスタイリングは完了です。 CSSを使って確認メッセージのスタイルを変更したいですか？ チュートリアル「確認メッセージボックスのスタイルを削除する方法」では、このスタイルを変更する方法を紹介します。

よくあるご質問

Q: このCSSをドロップダウン・フィールドのスタイルに使用できますか？

A: ドロップダウンフィールドのスタイルを変更したい場合は、こちらの記事をご覧ください。