今回はFontAwsome5のアイコンフォントを使い、フォームのラジオボタン・チェックボックス・セレクトメニューのデザインをカスタマイズする方法を解説します。
アイコンを使うことで、フォームのデザインを変えることができたり、アクセントになります。
今回の方法はコピペで簡単に設置できますので、ぜひ試して下さい。
目次
FontAwsome5をCSSで扱う方法
まずは、以下サイトにてFontAwsome5のCDN用URLを取得します。
FontAwsome5はFreeであればライセンス費用無料で使用できます。
https://origin.fontawesome.com/
上の「Start」ボタンを押し、URLをコピーします。
使いたいアイコンを探し、Unicodeをコピーします。
CSSでFontファミリーの指定と、Content部分でUnicodeを指定します。
FontAwsome4とfont-familyの指定方法が違うのでご注意ください。
.hoge:before { font-family: 'Font Awesome 5 Free'; content: "\f14a"; }
チェックボックスをカスタマイズする
html5のinput要素のtype=”checkbox”をFontAwsome5で装飾します。
デフォルトの■を非表示にして、FontAwsome5の■アイコンに変更します。
表示サンプル
HTML
<div class="u-mb-20"> <p>チェックボックス</p> <div class="checkbox"> <input type="checkbox" value="1" id="check1" checked> <label for="check1">チェック項目1</label> </div> <div class="checkbox"> <input type="checkbox" value="2" id="check2"> <label for="check2">チェック項目2</label> </div> <div class="checkbox"> <input type="checkbox" value="3" id="check3"> <label for="check3">チェック項目3</label> </div> </div>
CSS
/*チェックボックス ---------------------------------------------------------------------------*/ .checkbox label { display: inline; cursor: pointer; } .checkbox input[type=checkbox] { display: none; } .checkbox input[type=checkbox] + label { font-size: 20px; } .checkbox input[type=checkbox] + label:before { display: inline-block; width: 22px; font-family: 'Font Awesome 5 Free'; content: "\f14a"; font-size: 20px; color: #666; } .checkbox input[type=checkbox]:checked + label:before { font-family: 'Font Awesome 5 Free'; content: "\f14a"; color: #28A7E1; }
ラジオボタンをカスタマイズする
html5のinput要素のtype=”radio”をFontAwsome5で装飾します。
デフォルトの●を非表示にして、FontAwsome5の●アイコンに変更します。
表示サンプル

HTML
<div class="u-mb-20"> <p>ラジオボタン</p> <div class="radiobox"> <input type="radio" name="radiogroup1" id="radio1" checked> <label for="radio1">ラジオ項目1</label> </div> <div class="radiobox"> <input type="radio" name="radiogroup1" id="radio2"> <label for="radio2">ラジオ項目2</label> </div> <div class="radiobox"> <input type="radio" name="radiogroup1" id="radio3"> <label for="radio3">ラジオ項目3</label> </div> </div>
CSS
/*ラジオボタン ---------------------------------------------------------------------------*/ .radiobox label { display: inline; cursor: pointer; } .radiobox input[type=radio] { display: none; } .radiobox input[type=radio] + label { font-size: 20px; } .radiobox input[type=radio] + label:before { display: inline-block; width: 22px; font-family: 'Font Awesome 5 Free'; content: "\f192"; font-size: 20px; color: #666; } .radiobox input[type=radio]:checked + label:before { font-family: 'Font Awesome 5 Free'; content: "\f192"; color: #28A7E1; }
セレクトメニューをカスタマイズする
html5のselect要素をFontAwsome5で装飾します。
デフォルトの三角形を非表示にして、FontAwsome5の下アングルアイコンに変更します。
表示サンプル
HTML
<div class="u-mb-20"> <p>セレクトメニュー</p> <div class="selectbox"> <select> <option>選択してください</option> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> </div> </div>
CSS
/*セレクトメニュー ---------------------------------------------------------------------------*/ .selectbox { position: relative; min-width: 200px; border: #ccc solid 1px; border-radius: 0px; font-size: 12px; display: inline-block; } .selectbox::after { position: absolute; top: 50%; right: 0px; margin-top: -10px; font-family: 'Font Awesome 5 Free'; width: 22px; font-weight: 900; content: "\f107"; color: #28A7E1; } .selectbox > select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 40px; line-height: 40px; box-sizing: border-box; padding-left: 8px; border: none; background-color: transparent; border-radius: 0; outline: none; } .selectbox select::checked { background-color: #28A7E1; }