✅【HTML/CSS】チェックボックスを自由にカスタマイズする方法【サンプルコードあり】

通常のチェックボックス（<input type="checkbox">）は、ブラウザによってデザインがバラバラですよね。

「もっとデザインを自由にカスタマイズしたい！」
「チェックマークを好きな色・形に変えたい！」

この記事では、CSSだけで既存のチェックボックスを完全カスタマイズする方法を、実例付きでわかりやすく解説します！

✅ 1. ブラウザ標準スタイルをリセットする

まずは、チェックボックスにブラウザ独自のデザインが適用されないようにリセットします。

input[type="checkbox"] {
  -webkit-appearance: none; /* Safari、Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* 標準化 */
}
input[type="checkbox"] {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

✅これで真っ白な四角いチェックボックスになります！

✅ 2. チェックが入った時のマークを作る

チェックが入ったときに「✔️」マークを表示するには、
**疑似要素（::before）**を使います！

input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  width: 16px;
  height: 10px;
  border-bottom: 3px solid #ca7f13;
  border-left: 3px solid #ca7f13;
  transform: rotate(-45deg);
}

✅これでチェックしたときに、オレンジ色（#ca7f13）のチェックマークが表示されます！

✅ 3. 実際に使えるHTML

<label>
  <input type="checkbox" name="agree">
  利用規約に同意する
</label>

✅ラベル（<label>）で囲むと、
テキストをクリックしてもチェックが入るので、使い勝手が良くなります！

✅ 4. さらにオシャレにするアイデア

• ✅ チェックボックスのサイズを大きくする
• ✅ チェックしたら背景色を変える
• ✅ 丸型にする（border-radius: 50%）
• ✅ チェックマークのアニメーションをつける

たとえばこんなカスタマイズも可能です！

input[type="checkbox"]:checked {
  background-color: #ffe5b4;
  border-color: #ca7f13;
}

✅ まとめ

✅ CSSだけで自由自在にデザインできるので、デザインの幅がぐっと広がります！

✉️ あなたのリクエスト教えてください！

「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます！

▶️ Xもフォローしてもらえるとめちゃくちゃ嬉しいです！