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

Excelでひとつのセルに入力された文字を適当な長さで2つのセルに分割

ひとつのセルに入力された文字を、適当な長さで分割して2つのセルに分ける処理が、思いの外苦労したので、メモ。 セル内容が、半角のみか全角のみで統一されていればもっと簡単なのだが、住所のようなケースで両者 …

no image

WebArena SuiteXでWordPressでルート表示

WebArena SuiteXへのWPインストールは自動機能があるので、とっても簡単だったのだが、ルートではなく別フォルダに作られる。 けども、WP側の簡単な設定でそれをルートディレクトリにできること …

no image

Themler 使い方覚書(随時更新)

動作は重いが、なかなか気に入っている、Themler. Create themes and templates for Magento, PrestaShop, WordPress, Joomla, …

PAで複数の同じPADの処理をループするときに気を付けること

Power Automate のフロー内で、同じデスクトップフローを2回使っている。それぞれの処理の終了後は、同じように同じ名前の出力変数を受け取り、次の条件で使っている。なので、最初の処理のブロック …

不動産プラグインのためのライトな検索ボックスをウィジェットに配置

不動産プラグインの検索は多機能で便利なのだが、ライトな検索をしたいユーザーに向けて、ライトな検索ボックスを設けたいニーズもあると思う。 つまり私は、こういうことをしたいのだが。 ウィジェットとして配置 …