### [フォームのテキストフィールドのスタイリング](https://wpforms.com/developers/how-to-customize-the-styling-of-text-based-form-fields/) **公開日:** 2022年2月4日 **著者:** Umair Majeed **抜粋:** このチュートリアルでは、CSSを使用して、色、サイズ、強制的な小文字または大文字への変換など、テキストベースのフォームフィールドをスタイリングするさまざまな方法を紹介します。 **コンテンツ:** フォームフィールドのテキストの表示方法をカスタマイズしたいですか？フォントサイズや色からテキスト変換まで、簡単なCSSでフォームのテキストフィールドを簡単に強化できます。 このガイドでは、メール、一行テキスト、段落テキストなどのさまざまなテキストベースのフィールドをスタイルする方法を説明します。 このガイドでは、フォームユーザーが制御するように設計されているリッチテキストエディタフィールドは対象外です。 ## フォームの設定 まず、フォームを作成してフィールドを追加する必要があります。このチュートリアルでは、**名前**、**メール**、**一行テキスト**、および**段落テキスト**フィールドを追加します。 フォームの作成にヘルプが必要な場合は、[フォーム作成ドキュメント](https://wpforms.com/docs/creating-first-form/)を確認してください。 パスワードフィールドにこれらのCSSスタイルを適用しないでください。適用すると、パスワード強度機能に干渉し、フォームの送信が妨げられる可能性があります。 ## カスタムスタイルの追加 テキストフィールドをスタイリングするさまざまな方法を見てみましょう。サイトにCSSを追加する方法については、[カスタムCSSの追加](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)に関するチュートリアルを確認してください。 特定のフォームまたはフィールドをターゲットにする場合は、**-999** を実際のフォームIDとフィールドIDに置き換える必要があります。これらのIDを見つけるのにヘルプが必要な場合は、[フォームとフィールドIDの検索](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/)ガイドを確認してください。 #### テキストサイズ フォームフィールド内のテキストのサイズを変更するには： ###### すべてのフォームの場合 ``` .wpforms-form input { font-size: 20px !important; } ``` ###### 特定のフォーム内の特定のフィールドの場合 ``` #wpforms-999-field_1-container input { font-size: 20px !important; } ``` #### テキストの色 フォームフィールドのテキストの色を変更するには： ###### すべてのフォームの場合 ``` .wpforms-form input { color: #000000 !important; } ``` ###### 特定のフォーム内の特定のフィールドの場合 ``` #wpforms-999-field_1-container input { color: #000000 !important; } ``` #### テキスト変換 テキストの大文字小文字を制御するには： ###### すべてのフォームの場合 ``` .wpforms-form input { text-transform: capitalize !important; } ``` ###### 特定のフォーム内の特定のフィールドの場合 ``` #wpforms-999-field_1-container input { text-transform: capitalize !important; } ``` 利用可能な**text-transform**値： - **lowercase**: すべてのテキストを小文字に強制します - **uppercase**: すべてのテキストを大文字に強制します - **capitalize**: 各単語の最初の文字を大文字にします これで、テキストベースのフォームフィールドのスタイリングをカスタマイズするために必要なすべてが揃いました。 WPFormsには多くのCSSチュートリアルがあります。私たちの[完全なリスト](https://wpforms.com/developers/tags/css/ "WPForms Developer CSS snippets")を見て、他のCSSチュートリアルをチェックしてみませんか。これらは定期的に更新されるので、頻繁に確認してください。ただし、より具体的なCSSのハウツー情報をお探しの場合は、[WPForms VIP Circleに参加して、そこで質問してください](https://www.facebook.com/groups/wpformsvip "WPForms VIP Circleに参加して、クイックヒントとハウツーを入手")！ CSSに関するチュートリアルの具体的なリクエストがある場合は、[Facebook WPForms VIPコミュニティ](https://www.facebook.com/groups/wpformsvip "Facebook WPForms VIPコミュニティ")で遠慮なくお声がけください！ **カテゴリー:** スタイリング **タグ:** CSS ---