MW WP Formのcheckboxとradioを好みのデザインにカスタマイズ！
この記事は、最初の投稿から4年以上が経過しています。
最終更新から1531日が経過しています。
「チェックボックスとラジオボタンのデザインをカスタマイズしたい」
こういった疑問にお答えします｡
WordPressプラグイン 「 MW WP Form 」で出力されるHTMLを使用し､FontAwesomeを使った方法について解説します｡
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
MW WP Form はショートコードベースのフォームプラグインです。このプラグインには沢山の機能がついています。例えば、様々なバリデーションルールを使ったり、問い合わせデータを保存することができます。
カスタマイズのポイント
FontAwesomeを使う
チェックボックスとラジオボタンのカスタマイズは､疑似要素(:befoer,:after)を使ったものが多いです｡
position:absolute;で合わせる方法だと､特にレスポンシブコーディングのときに位置合わせが難しいです｡
FontAwesomeを使うと位置合わせをする必要はなく､フォントを変更するだけで､チェックのON/OFFが切り替えられます｡
MW WP Formを使う
WordPressを使用することが多く､フォームにはほとんど「MW WP Form」を使用するので､「MW WP Form」で出力されるHTMLタグを前提にします｡
コピペすればWordPress以外でも使用できます｡
デモ
チェックボックスもラジオボタンも､使用するフォントが違うだけなので一緒に解説していきます｡
チェックボックス
See the Pen checkbox fontawesome by hashi84 (@hashi84) on CodePen.
ラジオボタン
See the Pen radio fontawesome by hashi84 (@hashi84) on CodePen.
WordPress「 MW WP Form 」
WordPressプラグイン「 MW WP Form 」の場合は､以下のコードで､デモに使っているHTMLタグが出力されます｡
チェックボックス
[mwform_checkbox name="checkbox" children="checkbox1,checkbox2,checkbox3" separator=","]
ラジオボタン
[mwform_radio name="radio" children="radio1,radio2,radio3"]
解説
FontAwesomeを読み込みます｡
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
MW WP Formで出力されるタグの構成｡
labelにinputとテキストが囲まれているので､label内全体をクリックすることでチェックができます｡
<span class="mwform-radio-field horizontal-item">
<label >
<input type="radio" name="radio" value="radio1" />
<span class="mwform-radio-field-text">radio1</span>
</label>
</span>
display: none;でチェックボックス(ラジオボタン)を非表示にします｡
また､これだけだとiPhoneなどで表示されてしまうので､appearance: none;もつけておきます｡
appearance: none;でデフォルトスタイルを無効にできます｡
input[type=checkbox] {
appearance: none;
display: none;
}
input[type=checkbox]の次のタグ(span)に疑似要素を指定します｡
ここにfontawesomeのアイコンフォントを使用します｡
contentの中が指定するフォントです｡
input[type=checkbox] + span:before {
font-family: "Font Awesome 5 Free";
content: "\f0c8";
display: inline-block;
margin-right: 0.5em;
font-weight: 400;
}
input[type=checkbox]に「:checked」をつけると､チェックされているときの指定になります｡
『チェックボックスがチェックされているときの､チェックボックスの次のタグ「span」の疑似要素beforeに指定する』という感じで読むことができます｡
input[type=checkbox]:checked + span:before {
content: "\f14a";
font-weight: 400;
}
使いたいアイコンフォントはFontAwesomeで探して指定します｡
有料プランであれば､線の太さなどより多くのフォントを使うことができます｡
カスタマイズで使う疑似要素については､以下の記事で詳しく解説しています｡
【CSS】疑似要素（:before、:after）とは？よくあるミス、使い方
コーディングで使う疑似要素について知りたいですか？この記事では疑似要素についての解説、よくあるミスについて、おもな使い方（アイコン、図形、装飾、連番）について紹介しています。ぜひご覧ください。
MW WP Formの使い方については､以下の記事にまとめています｡
フォームカスタマイズに便利！MW WP Formの使い方まとめ【WordPress】
WordPressのメールフォームをカスタマイズする方法を知りたいですか？この記事では、カスタマイズに便利なプラグインMW WP Formの使い方、カスタマイズ方法などをまとめて紹介しています。ぜひご覧ください。
まとめ
チェックボックスとラジオボタンのデザインをカスタマイズする方法を紹介しました｡
フォームの要素はブラウザ､端末によって違うので､こういった方法で統一させておくとブラウザ､端末によるデザインの違いを無くすことができます｡
