*

ContactForm7プラグイン-チェックしたチェックボックスの背景色を変える

本日やったこと。

ContactForm7プラグインを使っているが、チェックボックスのクリックが小さくて、なかなかクリックできないので、ホットスポットというか、クリック感知の範囲を広げたかった。

こんなときContactForm7では便利なオプション「use_label_element」が用意されていて、ラジオボタンとチェックボックスにを入れることで、クリック範囲を広げることができるのだ。
チェックボックス、ラジオボタン、メニュー | Contact Form 7 [日本語]
こんなことができるんだー。かんたんにー。知らんかった。改めて尊敬する。すごいプラグイン。

また、ContactForm7のプラグイン内に、手動のHTMLタグでラジオボタンを設置した箇所があり、ここは上記の方法が使えない。
以下の方法で、手動で<LABEL for=”i1″>を書き込んだ。
ラベル <LABEL> – HTMLタグリファレンス/Tips

最後に、このエントリーの表題である「チェックしたチェックボックス(またはラジオボタン)に隣接するラベルのスタイルを変える」・・・のは、とても難しかった。
CSSでやる方法は検索すると結構見つかるのだが、ContactForm7とJQueryの両方を使っているサイトでは、コードが入り組んでいて、難しいっぽいのだ。
無理だわ・できんわ・・・と思いきや、以下のページの「要素の表示・非表示処理」の方法で、可能になった。何時間調べただろうか。見つかってよかった。
[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法

「間接セレクタ」って、初めて聞いたし、初めて使った。

CSSは奥が深い。

2017/10/20 | IT仕事, WordPress

関連記事

no image

FabricJSについて調べてみた。

ベースは、こちらのブログで公開されていたコード。深く感謝! Fabr...

記事を読む

no image

Xojoに興味がある

というのも、Webアプリが作りたくなったからである。 https:/...

記事を読む

no image

ExcelWebAddin でWebフォームを自動入力

たまーーに、おじさんの不動産物件の入力をボランティアでお手伝している。...

記事を読む

no image

GoogleChromeの拡張機能を使ってGmailの本文中の文字を簡単に再検索する方法

Gmailの注文メールを開いて、お客様の注文番号や電話番号・メールアド...

記事を読む

新着記事

no image

FabricJSについて調べてみた。

ベースは、こちらのブログで公開されていたコード。深く感謝! Fabr...

記事を読む

no image

Xojoに興味がある

というのも、Webアプリが作りたくなったからである。 https:/...

記事を読む

no image

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

以前の記事でXeoryBaseのテーマにおいていろいろと作業をしてたこ...

記事を読む

no image

Office2013のSELFCERT.EXEの場所

さがして、やっと見つかった。 自分のPC環境の場合は、以下だった...

記事を読む

コメント/トラックバック

現在、この投稿へのコメント/トラックバックは受け付けていません。

no image
FabricJSについて調べてみた。

ベースは、こちらのブログで公開されていたコード。深く感謝! Fabr...

no image
Xojoに興味がある

というのも、Webアプリが作りたくなったからである。 https:/...

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

以前の記事でXeoryBaseのテーマにおいていろいろと作業をしてたこ...

no image
ContactForm7プラグイン-チェックしたチェックボックスの背景色を変える

本日やったこと。 ContactForm7プラグインを使っている...

no image
Office2013のSELFCERT.EXEの場所

さがして、やっと見つかった。 自分のPC環境の場合は、以下だった...

→もっと見る

PAGE TOP ↑