FontAwsomeとCSSでラジオボタン・チェックボックス・セレクトメニューのカスタマイズ

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