しゅう【Webサイト制作/改良
・コーダー】
のPortfolio Site

Contact Form 7で、自動生成されるタグに簡単に個別CSSスタイルをあてる方法

ブログ投稿アイキャッチ画像
Image by jessica45 from Pixabay
当サイトはアフィリエイト広告を利用しています

備忘録に記事にしますが、改善の余地ありそうです↓↓

inputはどのタイプも
「wpcf7-form-control-wrap」
っていう共通クラス持った自動生成されたspanタグに囲われてるから、

全部のinputに共通スタイルをあてたいときは

wpcf7-form-control-wrap input {...

inputのタイプ別にスタイルをあてたいときは、その子孫セレクタを使ってやって、

wpcf7-form-control-wrap input[type="text"] {...
とか、
wpcf7-form-control-wrap input[type="radio"] {...

って書いてやると、

Contact Form 7内部のinputに、それぞれ個別のスタイルをあてることができます。

textとか、同じタイプのインプットが複数ある場合は、手間ですが、個別にクラス当てるか、クラスつけたdivなんかで囲う??

この投稿の後日確認したら、

Contact Form 7のinputタグの方には「wpcf7-form-control」ってクラスがついてるみたいなので、それ基準にスタイル当てるのもありかもしれません。

まだ、工夫の余地はありそうです。

以下、X投稿全文コピペ↓↓


勘違い、 Contact form 7 でお問い合わせフォーム作ったとき、
タグが自動生成されて、
inputタグには自分の好きなクラス名はつけれないので、
保守性低いなぁ… と思ってたら、

inputはどのタイプも 「wpcf7-form-control-wrap」
っていう共通クラス持った自動生成されたspanタグに囲われてるから、
そっち基準にスタイル当てろ~、ってことなんすね

またひとつ賢く、またひとつスピードアップです


サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

公式Lineのトークからも
ご相談・お問い合わせいただけます↓↓
無理な営業は一切行いません

友だち追加