サポート » プラグイン » contact form7のradio checkboxのデザインカスタマイズについて

  • お世話になっております。
    私は初めてワードプレスを使っているため、
    程度の低い質問であった場合は申し訳ございません。

    現在、
    Wordpress3.1.4にてコーポレートサイトを構築しております。
    お問い合わせフォームをcontactform7にて作成しようと
    contactform7 バージョン3をダウンロード致しました。

    contactform7のデザインをカスタマイズしておりますが
    どうしてもradioとチェックボックスのみデザインの変更が出来ません。

    <p> 性別 <span> (必須)</span>[radio sex "男" "女"] </p>
    通常であれば
    <p> 性別 <span"> (必須)</span>[radio sex "男" "女" class:hoge] </p>
    などのclassを指定してスタイルシートでデザインするのだと思うのですが
    radioとチェックボックスの場合、うまくいきません。

    「性別」の表示すら消えてしまう状況でございます。

    作成後のブラウザ表示はIE7以上 CHROME SAFARIで考えております。

    色々と調べてみましたが
    テキストエリアであったり、
    送信ボタン、
    背景のボックスのカスタマイズは情報が落ちているのですが
    こちらはございませんでした。

    何か良い方法はございますでしょうか。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    <p> 性別 <span"> (必須)</span>[radio sex "男" "女" class:hoge] </p>

    タグの中のテキストの順序には決まりがありまして、正しくは

    [radio sex class:hoge "男" "女"]

    になります。

    これで、2個のラジオボタンを包含する span 要素に “hoge” の class が追加されますから、それに対してお使いのテーマ内の CSS スタイルシートあたりでスタイル適用すればOKです。

    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    Takayuki Miyoshiさん

    早速のご返信ありがとうございました。
    [radio sex class:hoge “男” “女”]

    早速CSSを実装してみたのですが、
    .hoge { background:url(hoge.png) no-repeat;}
    用意したpngが背景に映った状態で、
    元々のinput type の radioのボタンが残ったままになってしまいます。

    もし宜しければこちらの消し方もご教授頂ければ大変助かるのですが・・・

    未熟なご質問で申し訳ございません・・・

    モデレーター Takayuki Miyoshi

    (@takayukister)

    状況がよく見えないので何とも答えにくいんですが、

    これで、2個のラジオボタンを包含する span 要素に “hoge” の class が追加されますから、

    回答のこの辺、見落とされていませんか? .hoge がかかるのは input 要素ではなく span 要素です。

    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    Takayuki Miyoshiさん

    素早い回答本当にありがとうございます。

    現状は
    用意したラジオボタンの表示として使用したいpngと
    デフォルトのラジオボタンが隣り合って併存している状況で、

    デフォルトのラジオボタンを用意した画像に切り替えたいのが趣旨になります。

    実はspanもinputも取り扱いが私個人よく分かっておらず、
    大変申し訳ございません。
    一度調べてみます。

    何度もありがとうございます。。。

    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    Takayuki Miyoshiさん

    span要素とinput要素の違いがようやく分かりました。
    現在 contact form7にて作成中なのですが

    [radio sex class:hoge "男" "女"]
    にて作成し、ページのソースコードを見てみますと

    <span class="wpcf7-form-control-wrap radio-41"><span class="wpcf7-radio radio"><span class="wpcf7-list-item"><input type="radio" name="radio-41" value="男">&nbsp;<span class="wpcf7-list-item-label">男</span></span><span class="wpcf7-list-item"><input type="radio" name="radio-41" value="女">&nbsp;<span class="wpcf7-list-item-label">女</span></span></span></span>

    となります。

    私の実現したい内容はinputタイプの形をデフォルトのものから
    用意したpng画像に切り替えたい、という内容ですので
    実現するためにはinput要素にclassを付けてbackground-imageで装飾する、ということなのか、と理解しております。

    ただやり方が分かりません。。。

    何度も大変申し訳ございませんが
    もしお時間許しましたらご教授頂ければ幸いでございます。

    モデレーター Takayuki Miyoshi

    (@takayukister)

    CSS について調べてみるとよろしいかと思います。hoge クラスが付いた要素の子孫要素である input 要素にスタイルを適用するわけですから、

    span.hoge input { background-image: ... }

    というような指定が可能です。

    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    Takayuki Miyoshiさん

    ご回答ありがとうございます。

    hogeクラスではなく、実際のコードを以下に書きますと
    [radio sex “男” “女” class:radio]
    こちらをcontactform7にタグとして保存し、

    ページの要素を検証すると以下のコードが現在表示されております。
    <span class="wpcf7-form-control-wrap sex"><span class="wpcf7-radio radio"><span class="wpcf7-list-item"><input type="radio" name="sex" value="男">&nbsp;<span class="wpcf7-list-item-label">男</span></span><span class="wpcf7-list-item"><input type="radio" name="sex" value="女">&nbsp;<span class="wpcf7-list-item-label">女</span></span></span></span>

    そのため、以下の4通りのCSSを検討しましたがやはりデフォルトのラジオボタンが実装されているままになっております。
    1:span.radio input { background:url(hoge.png) no-repeat; }
    2:span.wpcf7-form-control-wrap sex input { background:url(hoge.png) no-repeat; }
    3:span.wpcf7-radio radio input { background:url(hoge.png) no-repeat; }
    4:span.wpcf7-list-item input { background:url(hoge.png) no-repeat; }

    これはどこかで私が単純ミスをしている可能性が高いのでもう少し試行錯誤してみます。
    (よく凡ミスで何時間もうなっていることが多いのでありえます。。。)

    またこちら実装出来たとした場合、
    デフォルトのラジオボタンはクリックすると
    青い丸が中に現れますが、
    用意したpngの画像の真ん中にこの青い丸が出てくるようになるのでしょうか?

    というのも、
    一度これらの画像が生成されている元コードを見ようと思い、
    contactform7のプラグインのファイルの中のimageファイルを見ても、
    この青い丸やラジオボタンやチェックボックスの枠の画像が無かったもので
    何由来でこれらの画像が出てくるのかがいまいち理解出来ません。

    勉強不足なご質問だらけで申し訳ございません。

    こちらも本当にもしお時間許せばで構いませんので
    お付き合い頂ければ大変幸甚にございます。。。

    モデレーター Takayuki Miyoshi

    (@takayukister)

    またこちら実装出来たとした場合、
    デフォルトのラジオボタンはクリックすると
    青い丸が中に現れますが、
    用意したpngの画像の真ん中にこの青い丸が出てくるようになるのでしょうか?

    よくわかりませんがそういうことではないのではないでしょうか。その「青い丸」はスタイルシートで指定されたものではなくお使いのブラウザによるものではないかと思います。別のブラウザで見てみたら違ったように表示されませんか?

    最終的にどのようにデザインされたいのかわかりませんので、あとはご自身で調査されるのがよろしいかと思います。

    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    Takayuki Miyoshiさん

    私の知識も質問の仕方も多々未熟であったにも関らず、
    色々ご回答頂きありがとうございました!

    既に解決しましたでしょうか?
    今さらですが、checkbox等を装飾したいのであれば、このエントリーが役に立つと思います。
    クリエイターボックス|CSS3とjQueryでフォームを美しく装飾する方法

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「contact form7のradio checkboxのデザインカスタマイズについて」には新たに返信することはできません。