<p> 性別 <span"> (必須)</span>[radio sex "男" "女" class:hoge] </p>
タグの中のテキストの順序には決まりがありまして、正しくは
[radio sex class:hoge "男" "女"]
になります。
これで、2個のラジオボタンを包含する span 要素に “hoge” の class が追加されますから、それに対してお使いのテーマ内の CSS スタイルシートあたりでスタイル適用すればOKです。
Takayuki Miyoshiさん
早速のご返信ありがとうございました。
[radio sex class:hoge “男” “女”]
早速CSSを実装してみたのですが、
.hoge { background:url(hoge.png) no-repeat;}
用意したpngが背景に映った状態で、
元々のinput type の radioのボタンが残ったままになってしまいます。
もし宜しければこちらの消し方もご教授頂ければ大変助かるのですが・・・
未熟なご質問で申し訳ございません・・・
状況がよく見えないので何とも答えにくいんですが、
これで、2個のラジオボタンを包含する span 要素に “hoge” の class が追加されますから、
回答のこの辺、見落とされていませんか? .hoge がかかるのは input 要素ではなく span 要素です。
Takayuki Miyoshiさん
素早い回答本当にありがとうございます。
現状は
用意したラジオボタンの表示として使用したいpngと
デフォルトのラジオボタンが隣り合って併存している状況で、
デフォルトのラジオボタンを用意した画像に切り替えたいのが趣旨になります。
実はspanもinputも取り扱いが私個人よく分かっておらず、
大変申し訳ございません。
一度調べてみます。
何度もありがとうございます。。。
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="男"> <span class="wpcf7-list-item-label">男</span></span><span class="wpcf7-list-item"><input type="radio" name="radio-41" value="女"> <span class="wpcf7-list-item-label">女</span></span></span></span>
となります。
私の実現したい内容はinputタイプの形をデフォルトのものから
用意したpng画像に切り替えたい、という内容ですので
実現するためにはinput要素にclassを付けてbackground-imageで装飾する、ということなのか、と理解しております。
ただやり方が分かりません。。。
何度も大変申し訳ございませんが
もしお時間許しましたらご教授頂ければ幸いでございます。
CSS について調べてみるとよろしいかと思います。hoge クラスが付いた要素の子孫要素である input 要素にスタイルを適用するわけですから、
span.hoge input { background-image: ... }
というような指定が可能です。
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="男"> <span class="wpcf7-list-item-label">男</span></span><span class="wpcf7-list-item"><input type="radio" name="sex" value="女"> <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ファイルを見ても、
この青い丸やラジオボタンやチェックボックスの枠の画像が無かったもので
何由来でこれらの画像が出てくるのかがいまいち理解出来ません。
勉強不足なご質問だらけで申し訳ございません。
こちらも本当にもしお時間許せばで構いませんので
お付き合い頂ければ大変幸甚にございます。。。
またこちら実装出来たとした場合、
デフォルトのラジオボタンはクリックすると
青い丸が中に現れますが、
用意したpngの画像の真ん中にこの青い丸が出てくるようになるのでしょうか?
よくわかりませんがそういうことではないのではないでしょうか。その「青い丸」はスタイルシートで指定されたものではなくお使いのブラウザによるものではないかと思います。別のブラウザで見てみたら違ったように表示されませんか?
最終的にどのようにデザインされたいのかわかりませんので、あとはご自身で調査されるのがよろしいかと思います。
Takayuki Miyoshiさん
私の知識も質問の仕方も多々未熟であったにも関らず、
色々ご回答頂きありがとうございました!
既に解決しましたでしょうか?
今さらですが、checkbox等を装飾したいのであれば、このエントリーが役に立つと思います。
クリエイターボックス|CSS3とjQueryでフォームを美しく装飾する方法