MW WP Formでのラジオボタンのカスタマイズ｜名古屋市中川区のホームページ制作会社 株式会社XIA(クロスアイエー)

MW WP Formでのラジオボタンのカスタマイズ

ワードプレスの便利なプラグインは数々あります。
その中でも、今日は、フォームのプラグインのお話です。
確認画面があってとても日本人向けな【MW WP Form】(https://plugins.2inc.org/mw-wp-form/)をよく使うことがあると思います。

コンタクトフォームでよく使う、ラジオボタンです。

↑こうゆうものです。

このラジオボタンをカスタマイズしたい！
というときの方法です。

1.ラジオボタンの＜input＞タグに“radio”と、クラス名を付けます。

2.MW MP Formのラジオボタンの構造が、

＜label＞タグの中に＜input＞タグと＜span＞タグが入っているので、そこにCSSを付けていきます。

3.CSSを書いていきます。

ラジオボタンをいろいろとカスタマイズする時、いろいろ検索してみると、＜input＞タグに隣接させたタグに疑似要素を作って、カスタマイズしていりするので、＜label＞タグで囲んでる場合どうしたらいいのかな、と悩みました。

もしよかったら一度お試しください。