今回は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; }
