【簡単】cssでチェックボックスをカスタマイズする方法

前職はトヨタ自動車株式会社、現在は複数のweb制作会社のパートナーとしてCMS・ECサイト構築を担当しております。

• CMS・ECサイト構築歴2年以上
• 制作実績件数70件以上
• 15以上のキーワードで検索結果の10位以内を獲得

• cssでチェックボックスをカスタマイズする方法が知りたい。

• Contact Form 7やMW WP Form使用してお問い合わせフォームを作るが、デフォルトのチェックボックスのデザインがダサい…

• コピペで使える、簡単で分かりやすいcssコードを記載してほしいな！

と疑問を抱えている方の悩みを解決できる記事になってます。

なぜなら、これから紹介する『チェックボックスのカスタマイズ方法』は、実案件で使用しているからです。

この記事を読み終えることで、『cssでチェックボックスをカスタマイズする方法』を理解することができます。

【簡単】cssでチェックボックスをカスタマイズする方法

１）カスタマイズ後のチェックボックスとCSSコードの共有

カスタマイズ後のチェックボックスは、以下のようになります。

また、cssコードは以下のようになります。

input[type="checkbox"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  content: '';
}

htmlコードは以下のようになります。

<input type="checkbox" id="name">
<label for="name">チェックボックス</label>

２）デフォルトのチェックボックスのCSSを無効化（リセット）する

まずは、デフォルトのチェックボックスのcssを無効化（リセット）します。

input[type="checkbox"] {
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

『appearance: none;』を記述することで、ブラウザ別に設定されているチェックボックスのcssを無効化（リセット）することができます。

３）チェックボックスに独自デザインのCSSを記述する

ブラウザ別に設定されているチェックボックスのcssを無効化（リセット）したら、チェックボックスに独自のcssを記述します。

チェックされた時の『レ点』は、疑似要素で再現します。

input[type="checkbox"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  vertical-align: -5px;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  content: '';
}

説明不要かと思いますが、『:checked』は、『チェックボックスにチェックを入れた時』という意味です。

今回は、リセットcssは導入しておりませんが、各々お使いのリセットcssや文字サイズなどによってチェックボックスの上下の一が異なる為、『vertical-align』を利用して調整してください！

まとめ

今回は、お問い合わせフォームでよく使用される『チェックボックス』をカスタマイズする方法をご紹介しました。

難しいことは一切おこなっていない為、cssに詳しくない方でも理解できるのかなと思います。

今回は以上です！