ラジオボタンやチェックボックスをオリジナルデザインの画像へ変更するCSSのイメージ

ラジオボタンやチェックボックスをオリジナルデザインの画像へ変更するCSS

  • HTML
  • CSS

フォームの要素でラジオボタンやチェックボックスを利用する場合、
ブラウザ標準のスタイルが当たるため思うようにデザインすることができません。

今回はこのラジオボタンやチェックボックスをオリジナルデザインの画像へ
変更するCSSをご紹介します。

目次

実際のコード

<form class="form">
  <input type="radio" name="radio" class="form__radio" id="radio1" checked>
  <label for="radio1" class="form__label-radio">ラジオ1</label>
  <input type="radio" name="radio" class="form__radio" id="radio2">
  <label for="radio2" class="form__label-radio">ラジオ2</label>
  <input type="checkbox" name="check[]" class="form__check" id="check1">
  <label for="check1" class="form__label-check">チェック1</label>
  <input type="checkbox" name="check[]" class="form__check" id="check2">
  <label for="check2" class="form__label-check">チェック2</label>
</form>
.form {
  &__radio {
    display: none;
  }
  &__check {
    display: none;
  }
  &__label-radio {
    width: 100%;
    display: flex;
    margin: 0 0 12px;
    background: url(ここにチェックする前の画像) no-repeat;
    background-size: 20px;
    background-position: left center;
    padding: 6px 0 6px 26px;
  }
  &__label-check {
    width: 100%;
    display: flex;
    margin: 0 0 12px;
    background: url(ここにチェックする前の画像) no-repeat;
    background-size: 20px;
    background-position: left center;
    padding: 6px 0 6px 26px;
  }
  &__radio:checked + &__label-radio {
    background: url(ここにチェックしたあとの画像) no-repeat;
    background-size: 20px;
    background-position: left center;
  }
  &__check:checked + &__label-check {
    background: url(ここにチェックしたあとの画像) no-repeat;
    background-size: 20px;
    background-position: left center;
  }
}

なお、Sassを利用せずにCSSで実装する場合は以下のコードになります。

.form__radio {
  display: none;
}
.form__check {
  display: none;
}
.form__label-radio {
  width: 100%;
  display: flex;
  margin: 0 0 12px;
  background: url(ここにチェックする前の画像) no-repeat;
  background-size: 20px;
  background-position: left center;
  padding: 6px 0 6px 26px;
}
.form__label-check {
  width: 100%;
  display: flex;
  margin: 0 0 12px;
  background: url(ここにチェックする前の画像) no-repeat;
  background-size: 20px;
  background-position: left center;
  padding: 6px 0 6px 26px;
}
.form__radio:checked + .form__label-radio {
  background: url(ここにチェックしたあとの画像) no-repeat;
  background-size: 20px;
  background-position: left center;
}
.form__check:checked + .form__label-check {
  background: url(ここにチェックしたあとの画像) no-repeat;
  background-size: 20px;
  background-position: left center;
}

実装についての解説

ご紹介したJavaScriptについて解説します。

label要素とラジオボタンやチェックボックスを紐づける

HTMLでラジオボタンやチェックボックスを作る際に、
隣にあるテキストがそれぞれ紐づくようにlabel要素で関連付けを行います。

部品となるラジオボタンやチェックボックスにはidを指定しており、
labelはfor属性で紐づけの指定を行っています。

これによりlabelのテキストをクリックするとラジオボタンや
チェックボックスが反応するようになります。

<!-- ラジオボタンの作成 / idとしてradio1を指定 -->
<input type="radio" name="radio" class="form__radio" id="radio1">

<!-- label要素でテキストを作成 / 関連フォーム部品としてradio1を指定 -->
<label for="radio1" class="form__label">ラジオ1</label>

CSSでラジオボタンやチェックボックスを非表示にする

標準のスタイルがあたっているラジオボタンやチェックボックスは
自由にカスタマイズできないためdisplay: noneの指定を行い非表示にしています。

サンプルコードではSass(SCSS)で記載しましたが、
CSSの場合は以下のように指定します。

// ラジオボタンを消す
.form__radio {
  display: none;
}

// チェックボックスを消す
.form__check {
  display: none;
}

これで要素としては存在していますが、表示はされない状態を作ることができました。

背景画像でチェックボックスとラジオボタンを再現する

非表示になったラジオボタンやチェックボックスの代わりにlabel要素に対して
背景画像で自作したオリジナルデザインの画像を設定します。

// ラジオボタンにひもづくlabel
.form__label-radio {
  width: 100%;
  display: flex;
  margin: 0 0 12px;
  background: url(ここにチェックする前の画像) no-repeat;
  background-size: 20px;
  background-position: left center;
  padding: 6px 0 6px 26px;
}

// チェックボックスにひもづくlabel
.form__label-check {
  width: 100%;
  display: flex;
  margin: 0 0 12px;
  background: url(ここにチェックする前の画像) no-repeat;
  background-size: 20px;
  background-position: left center;
  padding: 6px 0 6px 26px;
}

チェックをつけた場合にデザインが変わるようにするためには、
CSSの隣接セレクタを利用することで実現可能です。

以下のようにチェックされたラジオボタンやチェックボックスの隣のlabel要素という指定を行い、
背景画像の切り替えを行うことで擬似的に再現をしています。

// チェックがついたラジオボタン の隣 のラベルのスタイル
.form__radio:checked + .form__label-radio {
  background: url(ここにチェックしたあとの画像) no-repeat;
  background-size: 20px;
  background-position: left center;
}

/ チェックがついたチェックボックス の隣 のラベルのスタイル
.form__check:checked + .form__label-check {
  background: url(ここにチェックしたあとの画像) no-repeat;
  background-size: 20px;
  background-position: left center;
}

最後に

JavaScriptを使わずにCSSだけで手軽に実装してみました。
標準のデザインだと浮いてしまうということはよくありますので、参考になれば幸いです。

  1. SNIPPET
  2. CSS
  3. ラジオボタンやチェックボックスをオリジナルデザインの画像へ変更するCSS