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

WordPress初設定の覚書

まずは、ヘッダー画像を始め画像関係をいろいろと。 Defaultテンプレートを改造する方向でお客さんのテーマを作成したのだが、どうCSSを調べても直しても背景の浮き出し効果のある画像が消えてくれない。 …

no image

Cliborのマクロでウィンドウ操作&コピペを楽にする

Clibor、便利だわ~。もう大好き。 今回はこんなコードをご紹介。私が作った。えへ。 まあProの方々から見れば、全然大した頃は無いのでしょうが。 # -*- coding: utf-8 -*- # …

no image

フリースポット

仕事で宿泊施設。 公衆無線LAN構築を提案、いい感触。 個人的興味の深い仕事に、よし今度こそはと。

no image

改行文字の置換 まとめ

○強制改行をExcelで置換 検索側:[Ctrl]キー+[J]キー(何も表示されない) 置換側:任意 ○改行をWordで置換 検索側:^13(「ワイルドカードを使用する」にチェックをつけておく) 置換 …

no image

ファイルサーバにコンピュータ名で接続できない

入れ替えをした会社NAS(ファイルサーバ)に、自分のPCと同僚のPCの2台について、コンピュータ名で接続できない。 一方、IPアドレスでは、接続できる。 他の数十台のPCでは問題なくこれまで通り接続で …