他のフォームフィールドに影響を与えることなく、フォームの個々のフィールドのスタイルを変更したいですか?適切な CSS セレクタを使用すれば、フォーム コンポーネントのスタイルをニーズに合わせて変更できます。
このチュートリアルでは、WPFormsのファンシーフィールドのスタイル設定に必要なセレクタのリストを提供します。
注意:このチュートリアルの手順は高度で、CSSの知識が必要です。コードを使いたくない場合は、ブロックエディタでWPFormsをスタイリングするガイドを参照してください。
以下のコード・スニペットを使用する
以下は、CSSコードで特定のファンシーフィールドをターゲットにするために必要なCSSセレクタのリストです。
WPFormsがこれらのセレクタに自動的に適用するデフォルトのスタイルも含まれています。フォームの任意の部分をカスタマイズするには、このチュートリアルのCSSスニペットをあなたのサイトにコピーし、必要に応じて編集してください。
注:あなたのサイトにCSSを追加する方法が分かりませんか?WordPressサイトにカスタムCSSを追加する方法については、WPBeginnerのチュートリアルをご覧ください。
注:以下のコードの使い方については、標準フィールドやその他のフォーム要素のスタイルのカスタマイズについてのチュートリアルをご覧ください。
ファンシー・フィールズ
電話
電話パッド
.wpforms-form .wpforms-field.wpforms-field-phone { padding: 10px 0; clear: both; }
電話ラベル
.wpforms-form .wpforms-field.wpforms-field-phone .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
電話入力ボックス
.wpforms-form .wpforms-field.wpforms-field-phone input { background-color: #fff; box-sizing: border-box; border-radius: 2px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: block; float: none; font-size: 16px; border: 1px solid #ccc; padding: 6px 10px; height: 38px; width: 100%; line-height: 1.3; }
国名リストドロップダウン(スマートフォーマット)
.wpforms-form .wpforms-field.wpforms-field-phone .iti__country-list { position: absolute; z-index: 2; list-style: none; text-align: left; padding: 0; margin: 0 0 0 -1px; box-shadow: 1px 1px 4px rgb(0 0 0 / 20%); background-color: white !important; border: 1px solid #CCC; white-space: nowrap; max-height: 200px; overflow-y: scroll; }
住所(米国または国際)
アドレス・パディング
.wpforms-form .wpforms-field.wpforms-field-address { padding: 10px 0; clear: both; }
住所ラベル
.wpforms-form .wpforms-field.wpforms-field-address .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
住所入力ボックス
.wpforms-form .wpforms-field.wpforms-field-address input { background-color: #fff; box-sizing: border-box; border-radius: 2px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: block; float: none; font-size: 16px; border: 1px solid #ccc; padding: 6px 10px; height: 38px; width: 100%; line-height: 1.3; }
住所ドロップダウン(米国方式:州)
.wpforms-form .wpforms-field.wpforms-field-address select.wpforms-field-address-state { background-color: #fff; box-sizing: border-box; border-radius: 2px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: block; float: none; font-size: 16px; border: 1px solid #ccc; padding: 6px 10px; height: 38px; width: 100%; line-height: 1.3; }
住所ドロップダウン(国際スキーム:国)
.wpforms-form .wpforms-field.wpforms-field-address select.wpforms-field-address-country { background-color: #fff; box-sizing: border-box; border-radius: 2px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: block; float: none; font-size: 16px; border: 1px solid #ccc; padding: 6px 10px; height: 38px; width: 100%; line-height: 1.3; }
日時
日時のパディング
.wpforms-form .wpforms-field.wpforms-field-date-time { padding: 10px 0; clear: both; }
日時ラベル
.wpforms-form .wpforms-field.wpforms-field-date-time .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
日時入力ボックス
.wpforms-form .wpforms-field.wpforms-field-date-time input { background-color: #fff; box-sizing: border-box; border-radius: 2px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: block; float: none; font-size: 16px; border: 1px solid #ccc; padding: 6px 10px; height: 38px; width: 100%; line-height: 1.3; }
日付/時間日付ピッカー:カレンダー全体
.flatpickr-calendar { background: transparent; overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; text-align: center; padding: 0; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; border-radius: 5px; position: absolute; width: 293.75px; box-sizing: border-box; -webkit-transition: top .1s cubic-bezier(0,1,.5,1); transition: top .1s cubic-bezier(0,1,.5,1); z-index: 9999999999; background: #fff; box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,.08); }
日付/時間日付ピッカー:カレンダーの現在の日付
.flatpickr-day.today { border-color: #959ea9; }
日付/時間日付ピッカー:カレンダーの過去と翌月の日
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(57,57,57,.3); background: transparent; border-color: transparent; cursor: default; }
日時:タイムピッカー
.ui-timepicker-wrapper { overflow-y: auto; height: 142px; width: 6.5em; background: #fff; border: 1px solid #e6e6e6; border-radius: 3px; outline: none; z-index: 10001; margin: 0; }
ファイルのアップロード
ファイル・アップロードのパディング
.wpforms-form .wpforms-field.wpforms-field-file-upload { padding: 10px 0; clear: both; }
ファイルアップロードラベル
.wpforms-form .wpforms-field.wpforms-field-file-upload .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
ウェブサイト/URL
ウェブサイト/URLパディング
.wpforms-form .wpforms-field.wpforms-field-url { padding: 10px 0; clear: both; }
ウェブサイト/URLラベル
.wpforms-form .wpforms-field.wpforms-field-url .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
ウェブサイト/URL入力ボックス
.wpforms-form .wpforms-field.wpforms-field-url input { background-color: #fff; box-sizing: border-box; border-radius: 2px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: block; float: none; font-size: 16px; border: 1px solid #ccc; padding: 6px 10px; height: 38px; width: 100%; line-height: 1.3; }
パスワード
パスワードの水増し
.wpforms-form .wpforms-field.wpforms-field-password { padding: 10px 0; clear: both; }
パスワードラベル
.wpforms-form .wpforms-field.wpforms-field-password .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
パスワードのサブラベル
.wpforms-form .wpforms-field.wpforms-field-password .wpforms-field-sublabel { display: block; font-size: 13px; float: none; font-weight: 400; line-height: 1.3; margin: 4px 0 0; padding: 0; }
パスワード入力ボックス
.wpforms-form .wpforms-field.wpforms-field-password input { background-color: #fff; box-sizing: border-box; border-radius: 2px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: block; float: none; font-size: 16px; border: 1px solid #ccc; padding: 6px 10px; height: 38px; width: 100%; line-height: 1.3; }
リピーター
ブロック・ボタンの追加と削除
.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons { margin-top: 15px; display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; }
ブロック追加ボタン
.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons.wpforms-field-repeater-button-add { background: none; border: none; border-radius: 4px; min-height: 33px; max-width: 33%; padding: 6px 12px; line-height: 18px; font-size: 14px; font-weight: 400; color: #999999; cursor: pointer; transition: opacity 0.2s ease; outline: none; }
ブロック削除ボタン
.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons.wpforms-field-repeater-button-remove { background: none; border: none; border-radius: 4px; min-height: 33px; max-width: 33%; padding: 6px 12px; line-height: 18px; font-size: 14px; font-weight: 400; color: #999999; cursor: pointer; transition: opacity 0.2s ease; outline: none; }
行の追加と削除ボタン
.wpforms-form .wpforms-field-repeater .wpforms-field-layout-rows .wpforms-field-repeater-display-rows-buttons { position: absolute; right: 10px; left: unset; padding: 0; display: none; gap: 8px; }
ページ区切り
次のボタン
.wpforms-form .wpforms-page-button.wpforms-page-next { background-color: #eee; border: 1px solid #ddd; color: #333; font-size: 1em; padding: 10px 15px; }
前のボタン
.wpforms-form .wpforms-page-button.wpforms-page-prev { background-color: #eee; border: 1px solid #ddd; color: #333; font-size: 1em; padding: 10px 15px; }
セクション・デバイダー
セクション・デバイダー・パディング
.wpforms-form .wpforms-field.wpforms-field-divider { padding: 10px 0; clear: both; }
セクション分割タイトル
.wpforms-form .wpforms-field.wpforms-field-divider h3 { font-size: 24px; }
セクション・ディバイダー
.wpforms-form .wpforms-field.wpforms-field-divider .wpforms-field-description { font-size: 13px; line-height: 1.3; margin: 8px 0 0 0; }
エントリープレビュー
エントリー・プレビュー・パディング
.wpforms-form .wpforms-field.wpforms-field-entry-preview { padding: 10px 0; clear: both; }
エントリープレビューのお知らせ
.wpforms-form .wpforms-field.wpforms-field-entry-preview .wpforms-entry-preview-notice { box-sizing: border-box; padding: 15px; background: #fef8ee; border: 1px solid #f0b849; display: block; width: 100%; word-break: break-word; }
エントリープレビュー表
.wpforms-form .wpforms-field.wpforms-field-entry-preview .wpforms-entry-preview-basic { border-bottom: 1px solid #dddddd; padding-bottom: 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; width: 100%; overflow: hidden; }
HTML
HTMLパディング
.wpforms-form .wpforms-field.wpforms-field-html { padding: 10px 0; clear: both; }
内容
コンテンツ入力ボックス
.wpforms-form .wpforms-field.wpforms-field-content { background-color: #fff; box-sizing: border-box; border-radius: 2px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: block; float: none; font-size: 20px; border: 1px solid #ccc; padding: 6px 10px; height: 120px; width: 100%; line-height: 1.3; }
評価
レーティング・パディング
.wpforms-form .wpforms-field.wpforms-field-rating { padding: 10px 0; clear: both; }
格付けラベル
.wpforms-form .wpforms-field.wpforms-field-rating .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
評価項目パディング
.wpforms-form .wpforms-field-rating-item { padding-right: 6px; }
カスタムキャプチャ
カスタムCaptchaパディング
.wpforms-form .wpforms-field.wpforms-field-captcha { padding: 10px 0; clear: both; }
カスタムキャプチャラベル
.wpforms-form .wpforms-field.wpforms-field-captcha .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
リッチテキスト
リッチテキストパディング
.wpforms-form .wpforms-field.wpforms-field-richtext { padding: 10px 0; clear: both; }
リッチテキストラベル
.wpforms-form .wpforms-field.wpforms-field-richtext .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
署名
シグネチャー・パディング
.wpforms-form .wpforms-field.wpforms-field-signature { padding: 10px 0; clear: both; }
署名ラベル
.wpforms-form .wpforms-field.wpforms-field-signature .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
リッカート尺度
リッカート尺度のパディング
.wpforms-form .wpforms-field.wpforms-field-likert_scale { padding: 10px 0; clear: both; }
リッカート尺度ラベル
.wpforms-form .wpforms-field.wpforms-field-likert_scale .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
ネット・プロモーター・スコア
ネット・プロモーター・スコア水増し
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score { padding: 10px 0; clear: both; }
ネット・プロモーター・スコア・レーベル
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }
ネット・プロモーター・スコア表
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score table { width: 100%; line-height: 1.4; border-collapse: initial; }
以上です!これで、これらのセレクタを使用して、フォームのファンシーフィールドにカスタム CSS を適用する方法がわかりました。
次に、テーマスタイルを適用してフォームの全体的なデザインを変更しますか?フォームテーマの使い方に関するチュートリアルでは、すべてのステップを詳しく説明しています。