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

最終更新日: 公開日: 2022年01月

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

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

サンプルコード

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 を設定します。

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

 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
Chrome 拡張機能 PageSpeed Insights SEO WordPress Youtube お問い合わせフォーム アナリティクス アンケートフォーム サーチコンソール セミナー タグマネージャー データベース ヒアリング プラグイン ページ閲覧解析 マーケティング メール配信 リッチリザルト レスポンシブ対応 ログ解析 勉強会 商品企画 営業 営業力 営業支援システム 実装 検索順位 検索順位チェックツール 追跡 開発者ツール
contact
Pagetop