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

Excel2007でアドインを作って登録するまでの手順

Googleさまで探してもあまり好みの回答にたどり着かなかったので、自分及び誰かのためになるかと思いメモメモ。 ■1.標準モジュールにアドインにしたいコードを作成する。 以下のコードは、単純に、 「セ …

no image

hostingrails.com

知り合いがHPを作ってくれというので、どこかのサーバを借りることにした。 いろいろ検討した結果、hostingrails.comというところにした。 このレンサバはその名の通り、Railsで作ったWe …

no image

旧xoops myalbum 珍しいもの 2

かまぼこ工場4 harvest 2006-1-15 17:19 969 0 工場の職人さん、俺たちが子連れで行ったからか、作り上げた作品をわざわざ天地を整えて、ガラスのすぐ近くのみやすい位置に置いてく …

在庫らくだのメニュー部分を、UiPathで操作する->うまくいったり、いかなかったり

テスト中は、うまくいったものが、本番では、うまくいかなくなったり(うまくいくことも、たまに)。 UiExplorerでタグを調べたり、クリックを偽装したり、待機時間を入れてみたりと、いろいろ試してみた …

秀丸で、例えば「123市」を「123都市」にするときの正規表現の使い方メモ

検索文字のうち、置き換え後に残したい部分を、カッコで囲むのがミソ。 検索文字:([0-9])市 置換文字:\1都市 wordだと「ワイルドカードを使用する」とすると、正規表現が使える。