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

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: ドロップダウンフィールドをスタイリングしたい場合は、代わりにこちらの記事をご覧ください。