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

楽天の注文メールのタイトルを変更して転送

3か月以上ぶりの投稿。大変ご無沙汰である。 楽天からのご注文メールはGmailに転送しているのだが、その日のうちに注文が1件以上あった場合は、メールがばらけないで一つのスレッドにまとまってしまう。 で …

no image

TWSNMPマネージャを使ってみた。

大変素晴らしい、ネットワークツール(全機能の1/100も使わない私が言うのもなんだが) TWSNMPマネージャ :::Twise Labo, Inc. 一通り使ってみた所感など。 ・IPアドレスで範囲 …

FreeNASに挑戦

バージョン FreeNAS-9.2.1.3-RELEASE-x86。 FreeNAS-9.2.0-RELEASE-x64.iso。 2014/4/3(木)追記: Ver.9.2.1はCPU Usage …

no image

難解なAPIを使わずにShopifyの注文データをAccessに取り込む

Shopify側 ・Matrixfyアプリをインストールする。・Matrixfyはデモプランでも最大10件ダウンロードできる。スケジュールタスクは何個でも作成できるので、例えば、コンビニ知らはい、銀行 …

no image

Win7初体験・初トラブル

会社の人が初めてWin7入りPCを買ったので例によってトラブルに遭遇した。 ファイルサーバにアクセスしようとすると、「ネットワークパスワードを入力して下さい」のダイアログが出る。それでつながらない。 …