IT仕事 WordPress

ContactForm7プラグイン-チェックしたチェックボックスの背景色を変える

投稿日:

本日やったこと。

ContactForm7プラグインを使っているが、チェックボックスのクリックが小さくて、なかなかクリックできないので、ホットスポットというか、クリック感知の範囲を広げたかった。

こんなときContactForm7では便利なオプション「use_label_element」が用意されていて、ラジオボタンとチェックボックスにを入れることで、クリック範囲を広げることができるのだ。
チェックボックス、ラジオボタン、メニュー | Contact Form 7 [日本語]
こんなことができるんだー。かんたんにー。知らんかった。改めて尊敬する。すごいプラグイン。

また、ContactForm7のプラグイン内に、手動のHTMLタグでラジオボタンを設置した箇所があり、ここは上記の方法が使えない。
以下の方法で、手動で<LABEL for=”i1″>を書き込んだ。
ラベル <LABEL> – HTMLタグリファレンス/Tips

最後に、このエントリーの表題である「チェックしたチェックボックス(またはラジオボタン)に隣接するラベルのスタイルを変える」・・・のは、とても難しかった。
CSSでやる方法は検索すると結構見つかるのだが、ContactForm7とJQueryの両方を使っているサイトでは、コードが入り組んでいて、難しいっぽいのだ。
無理だわ・できんわ・・・と思いきや、以下のページの「要素の表示・非表示処理」の方法で、可能になった。何時間調べただろうか。見つかってよかった。
[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法

「間接セレクタ」って、初めて聞いたし、初めて使った。

CSSは奥が深い。

-IT仕事, WordPress

執筆者:

関連記事

no image

CMOSボタン電池切れ

DellのOptiplexを使っている隣人(会社)、席替えの際にコンセントから電源ケーブルを抜いて以来、PCが立ち上がらなくなった。 XPなのだが、ようこそ画面の直前の「マウスポインタと黒背景」から先 …

WordPressのお勉強のために、本を1冊購入することにした。

PDFデータのみの販売で2,500円。 PDFでさわりだけ見たけど、なかなかツボを突いた本の予感。Eclipseでブレークポイントを設定してWordPressの処理の流れを追っていくくだりが一番楽しみ …

no image

Ads by datafeedr.com というWordPressのプラグインが動かない原因は自分のブラウザであった

何度設定しても、広告が表示されない、出てこないと思っていたら。 自分のFireFoxに入れているAdBlockPlus拡張が、広告をブロックしていただけであった。 気がつくのに1時間かかっちゃったよ!

no image

FirefoxのURLの自動補完がきかなくなった けど直した

FirefoxのURLの自動補完がきかなくなった。 色々試してみても、回復できない。 ようやくわかった方法が以下。 F10を押してメニューを出し、ヘルプの、 トラブルシューティング情報 を表示し、右上 …

Shopifyダウン中

いまShopifyのサービスがダウンしている。全世界的に障害が起こっているみたい。Twitterで検索すると、いろんな国の人がいろんな言語で嘆いている。自社のECサイトも止まっているので、注文も入らな …