• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

ラジオボタンやチェックボックスをオリジナルデザインの画像へ変更する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;
}

実装の結果

クリックすると画像が切り替わります。

radio-checkbox-customize

実装についての補足と解説

ご紹介したコードの内容について紹介します。

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だけで手軽に実装してみました。
標準のデザインだと浮いてしまうということはよくありますので、参考になれば幸いです。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND