WPFormsのドロップダウンフィールドにカスタムの外観を与えたいですか？ブラウザはドロップダウンフィールドに独自のデフォルトスタイルを適用しますが、CSSを使用してサイトのデザインにマッチする独自の外観を作成することができます。
このガイドでは、ドロップダウンフィールドの色、ボーダー、矢印などをカスタマイズする方法を紹介します。
フォームの設定
ドロップダウンフィールドを持つフォームを作成することから始めましょう。この例では、シンプルなお問い合わせフォームを作成します：
- 名前欄
- 電子メール欄
- ドロップダウンフィールド（「どのようにして当店をお知りになりましたか？）
- 段落フィールド（コメント用）
フォームの作成にヘルプが必要な場合は、最初のフォーム作成ガイドをご覧ください。
背景とテキストのスタイリング
ここでは、ドロップダウンフィールドの基本的な外観をカスタマイズする方法を説明します。を置き換えることを忘れないでください。 1000 をフォームIDと一緒に入力してください：
カスタムCSSを追加する方法と場所についてヘルプが必要な場合は、カスタムCSSスタイルの追加に関するチュートリアルをご覧ください。
/* Basic dropdown styling */
form#wpforms-form-1000 select {
background-color: #b95d52;
color: #fff;
border: 1px solid #b95d52;
border-radius: 5px;
padding: 10px;
}
/* Hover and focus states */
form#wpforms-form-1000 select:hover,
form#wpforms-form-1000 select:focus {
background-color: #fff;
color: #b95d52;
box-shadow: none;
}
ドロップダウン矢印のカスタマイズ
デフォルトのドロップダウン矢印をカスタム画像で置き換えることができます：
/* Remove default arrow */
form#wpforms-form-1000 select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding-right: 30px;
/* Add custom arrow image */
background-image: url('your-arrow-image.png');
background-repeat: no-repeat;
background-position: right .7em center;
background-size: 25px 25px;
}
/* Hide default arrow in IE */
form#wpforms-form-1000 select::-ms-expand {
display: none;
}
Font Awesomeアイコンを追加する
よりモダンに見せるには、Font Awesomeのアイコンをドロップダウンの矢印として使うことができます。まず、Font Awesomeプラグインをインストールしてください。
/* Hide default arrow and prepare for Font Awesome */
#wpforms-form-1000-field_24-container select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: none;
padding-right: 30px;
}
/* Add Font Awesome arrow */
#wpforms-form-1000-field_24-container::after {
font-family: fontawesome;
content: "\f149"; /* Font Awesome down arrow code */
position: absolute;
top: 53%;
left: 95%;
pointer-events: none;
}
ドロップダウン・フィールドのスタイリング
- select（ドロップダウン）要素は、以下のような擬似要素を直接使用することはできません。
::beforeそして::after - 特定のフォームとフィールドIDをカスタムスタイリングの対象とする必要があります。
- 特定のCSSプロパティについては、ブラウザのサポートが異なります。
- フィールドIDはフォームのフィールドオプションパネルにあります。
フォームやフィールドのIDを探すのに助けが必要な場合は、フォームやフィールドのIDを探すガイドをご覧ください。
以上でWPFormsのドロップダウンフィールドのスタイル設定は完了です。次に、チェックボックスと 複数選択フィールドのスタイルも変更したいですか？チェックボックスとラジオフィールドをボタンのようにカスタマイズする方法のチュートリアルをご覧ください。