チェックボックスのデザインをカスタマイズする

チェックの切り替えでデザインが変わるチェックボックス

チェックボックスの切り替え時に、デザインを変更したい場合はないでしょうか。例えば会員登録情報の変更時に、登録済みの情報とは別の情報を選択した場合、変更したことが目に見えてわかるほうが親切ではないでしょうか。それをチェックの有無によってチェックボックスの周りの色を変更することで実装してみたいと思います。

チェック

サンプルコード

HTML

<span id="frame">
  <input type="checkbox" id="checkFrame">
</span>
<label for="checkFrame">チェック</label>

チェックボックスを span タグで囲むことで、チェックボックスの周りだけデザインを変更することができます。

JavaScript

if (document.getElementById('frame').classList.contains('change')) {
  document.getElementById('frame').classList.remove('change');
} else {
  document.getElementById('frame').classList.add('change');
}

チェックボックスをクリックした際に change クラスの付与、または削除を繰り返します。
今回のサンプルは初期状態はチェックが入っていませんが、チェックが入っている場合でも、チェックが外れたときに色がつくようになっています。

CSS

.change{
background: #ffb6c1;
}

最後にデザインです。チェックボックスを囲んでいる span タグに background を設定します。

以上、チェックボックスのデザインをカスタマイズする方法のご紹介でした。