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

仕事でイライラ。

こちらが要求しているのは、手間のかかることであり、かつ、一円もお金が引き出せないことだ。 それは、理解している。 それでも。 目の前の相手やその先の相手は、君の客ではないのか? 客という意識はないのか …

no image

秀丸マクロで、HTMLの幅と高さを削除する

正規表現を使い、さらにスペースや文字数に配慮すればするほど、わかりにくいコードになる・・・もうちょっと改善の余地があるのかもしれないが、自分のスキル的にココまでが限界。 replaceallfast …

no image

httpからhttpsに移行した際にいいねカウントを保持するためにWordPressサイトでやったこと

以前の記事でXeoryBaseのテーマにおいていろいろと作業をしてたことを書いた。 これでもって厄介な「いいねカウント」問題を解決した・・・と思っていたのだが、またおかしくなった。原因は不明。 プラグ …

no image

・・・

山を登り終えたら、海に潜って、空を飛べ・・・みたいな仕事(もちろん比喩)が連日続いていて、クタクタ。 この他に、メール読んだり書いたり、スケジュール確認やら優先順位の組み直しやら、社内の指示やら伝達や …

no image

Artisteer4で作成したHTMLページを印刷するとCSSが画面でみたものと違う

「印刷するとずれる。画面と同じように印刷したい」と、お客さんが言う。 Artisteerでは style.css” media=”screen” となっているので、 …