SVGで作るCSSカスタムチェックボックス：見た目も機能も妥協しない実装ガイド

SVGでチェックマークを描画する理由とCSSによる制御方法

HTMLの<nput type="checkbox">要素は便利ですが、デザインの自由度には限界があります。
CSSとSVGを組み合わせることで、チェックマークの形状を完全にカスタマイズ可能なチェックボックスを実現できます。
このページでは、SVGを使ったチェックマークの描画と、CSSによる状態制御を組み合わせた、実用的かつアクセシブルな実装方法を紹介します。

CSSは共通で以下をコピペしてください。
間接セレクタ(~)とfirst-of-typeとlast-of-typeを使ってチェックの有無により２つのSVG画像の表示非表示を切り替えています。
また、<label>要素をチェックボックスと文字の外側に配置することによりfor="id"で要素を関連付けしなくても文字をクリックした時にチェックボックスのオンオフが出来るようにしています。

<style>
  label.mam-svg-chkbox{
    font-size:24px;  /* お好みのサイズで */
    user-select: none;  /* お好みで入れる */
  }
  label.mam-svg-chkbox>input[type="checkbox"]{
    display: none;
  }
  label.mam-svg-chkbox>svg:first-of-type{
    display:none;
    width:0.9em;
    height:0.9em;
    vertical-align:baseline;
  }
  label.mam-svg-chkbox>svg:last-of-type{
    display:inline-block;
    width:0.9em;
    height:0.9em;
    vertical-align:baseline;
  }
  /* 間接セレクタ  チェックされていると表示 */
  label.mam-svg-chkbox>input[type="checkbox"]:checked ~ svg:first-of-type{
    display:inline-block;
  }
  /* 間接セレクタ  チェックされていると非表示  */
  label.mam-svg-chkbox>input[type="checkbox"]:checked ~ svg:last-of-type{
    display:none;
  }
  label.mam-svg-chkbox>span{
    font-size:1em;
    color:#222;
  }

</style>

四角枠のSVGアイコンを使ったチェックボックス１

<label class="mam-svg-chkbox">
  <input type="checkbox" />
  <svg viewBox="0 0 64 64">  <--! オンの時のSVG画像 -->
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#333;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <svg viewBox="0 0 64 64">  <--! オフの時のSVG画像 -->
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
  </svg>
  <span>選択肢</span>
</label>

四角枠のSVGアイコンを使ったチェックボックス２

  <label class="mam-svg-chkbox">
    <input type="checkbox">
    <svg viewBox="0 0 64 64">
      <rect style="fill:#333;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
      <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
    </svg>
    <svg viewBox="0 0 64 64">
      <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
      <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
    </svg>
    <span>選択肢</span>
  </label>

角丸四角枠のSVGアイコンを使ったチェックボックス１

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
    <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#333;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <svg viewBox="0 0 64 64">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
  </svg>
  <span>選択肢</span>
</label>

角丸四角枠のSVGアイコンを使ったチェックボックス２

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <rect style="fill:#333;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
    <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <svg viewBox="0 0 64 64">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
    <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <span>選択肢</span>
</label>

丸枠のSVGアイコンを使ったチェックボックス１

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#333;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <svg viewBox="0 0 64 64">
    <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
  </svg>
  <span>選択肢</span>
</label>

丸枠のSVGアイコンを使ったチェックボックス２

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <circle style="fill:#333;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <svg viewBox="0 0 64 64">
    <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <span>選択肢</span>
</label>

四角枠のSVGアイコンを使った赤チェックボックス１

<label class="mam-svg-chkbox">
  <input type="checkbox" />
  <svg viewBox="0 0 64 64">  <--! オンの時のSVG画像 -->
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M14,32 L8,36 L24,54 L58,10 L24,40 z" style="fill:#D00;stroke:none;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <svg viewBox="0 0 64 64">  <--! オフの時のSVG画像 -->
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
  </svg>
  <span class="mam-svg-chkbox-text">選択肢</span>
</label>

四角枠のSVGアイコンを使った赤チェックボックス２

<label class="mam-svg-chkbox">
  <input type="checkbox" />
  <svg viewBox="0 0 64 64">  <--! オンの時のSVG画像 -->
    <rect style="fill:#CCC;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M14,32 L8,36 L24,54 L58,10 L24,40 z" style="fill:#D00;stroke:#333;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <svg viewBox="0 0 64 64">  <--! オフの時のSVG画像 -->
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M14,32 L8,36 L24,54 L58,10 L24,40 z" style="fill:#FFF;stroke:#333;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;" />
  </svg>
  <span class="mam-svg-chkbox-text">選択肢</span>
</label>

四角枠の電源のSVGアイコンを使ったチェックボックス１

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#03F;stroke-width:8;" />
    <line style="fill:#none;stroke:#03F;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <svg viewBox="0 0 64 64" class="mam-svg-chkbox-off">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#F44;stroke-width:8;" />
    <line style="fill:#none;stroke:#F44;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <span class="mam-svg-chkbox-text">選択肢</span>
</label>

四角枠の電源のSVGアイコンを使ったチェックボックス２

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <rect style="fill:#26F;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#FFF;stroke-width:8;" />
    <line style="fill:#none;stroke:#FFF;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <svg viewBox="0 0 64 64">
    <rect style="fill:#F44;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#FFF;stroke-width:8;" />
    <line style="fill:#none;stroke:#FFF;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <span>選択肢</span>
</label>

四角枠の電源のSVGアイコンを使ったチェックボックス３

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#000;stroke-width:8;" />
    <line style="fill:#none;stroke:#000;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <svg viewBox="0 0 64 64">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#888;stroke-width:8;" />
    <line style="fill:#none;stroke:#888;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <span>選択肢</span>
</label>

丸枠の電源のSVGアイコンを使ったチェックボックス１

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#03F;stroke-width:8;" />
    <line style="fill:#none;stroke:#03F;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <svg viewBox="0 0 64 64">
    <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#F44;stroke-width:8;" />
    <line style="fill:#none;stroke:#F44;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <span>選択肢</span>
</label>

丸枠の電源のSVGアイコンを使ったチェックボックス２

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <circle style="fill:#26F;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#FFF;stroke-width:8;" />
    <line style="fill:#none;stroke:#FFF;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <svg viewBox="0 0 64 64">
    <circle style="fill:#F44;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#FFF;stroke-width:8;" />
    <line style="fill:#none;stroke:#FFF;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <span>選択肢</span>
</label>

丸枠の電源のSVGアイコンを使ったチェックボックス３

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#000;stroke-width:8;" />
    <line style="fill:#none;stroke:#000;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <svg viewBox="0 0 64 64">
    <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="30" />
    <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#888;stroke-width:8;" />
    <line style="fill:#none;stroke:#888;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
  </svg>
  <span>選択肢</span>
</label>

四角枠のメールのSVGアイコンを使ったチェックボックス１

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M14,18 L49,18 L32,32  M14,20 L32,36 L49,20 L49,45 L14,45" style="fill:#333;stroke:none;" />
  </svg>
  <svg viewBox="0 0 64 64">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M14,18 L49,18 L32,32  M14,20 L32,36 L49,20 L49,45 L14,45" style="fill:#999;stroke:none;" />
  </svg>
  <span>選択肢</span>
</label>

四角枠のメールのSVGアイコンを使ったチェックボックス２

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg viewBox="0 0 64 64">
    <rect style="fill:#333;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M14,18 L49,18 L32,32  M14,20 L32,36 L49,20 L49,45 L14,45" style="fill:#CCC;stroke:none;" />
  </svg>
  <svg viewBox="0 0 64 64">
    <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" />
    <path d="M14,18 L49,18 L32,32  M14,20 L32,36 L49,20 L49,45 L14,45" style="fill:#CCC;stroke:none;" />
  </svg>
  <span>選択肢</span>
</label>

顔のSVGアイコンを使ったチェックボックス２

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg style="width:32px;" viewBox="0 0 64 64">
    <path d="M4,32 A24,24 0,0,0 60,32 A24,24 0,0,0 4,32 z"
      style="fill:#FF0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
    <path d="M18,36 A12,10 0,0,0 46,36 z"
      style="fill:#FF0;stroke:#222;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"/>
    <path d="M24,16 A3,4 0,0,0 24,28 A3,4 0,0,0 24,16"
      style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
    <path d="M40,16 A3,4 0,0,0 40,28 A3,4 0,0,0 40,16"
      style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
  </svg>
  <svg style="width:32px;" viewBox="0 0 64 64">
    <path d="M4,32 A24,24 0,0,0 60,32 A24,24 0,0,0 4,32 z"
      style="fill:#DDD;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
    <path d="M18,42 A16,14 0,0,1 46,42"
      style="fill:none;stroke:#222;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"/>
    <path d="M24,16 A3,4 0,0,0 24,28 A3,4 0,0,0 24,16"
      style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
    <path d="M40,16 A3,4 0,0,0 40,28 A3,4 0,0,0 40,16"
      style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
  </svg>
  <span>選択肢</span>
</label>

ハートのSVGアイコンを使ったチェックボックス

<label class="mam-svg-chkbox">
  <input type="checkbox">
  <svg style="width:32px;" viewBox="0 0 64 64">
    <rect style="fill:#999;stroke:#666;stroke-width:2;" x="2" y="2" width="60" height="60" />
    <path d="M32,52 l-16,-16 a10,10 0,1,1 16,-4 a10,10 0,1,1 16,4 z" style="fill:#F33;stroke:none;" />
  </svg>
  <svg style="width:32px;" viewBox="0 0 64 64">
    <rect style="fill:#DDD;stroke:#666;stroke-width:2;" x="2" y="2" width="60" height="60" />
    <path d="M32,52 l-16,-16 a10,10 0,1,1 16,-4 a10,10 0,1,1 16,4 z" style="fill:#FFF;stroke:none;" />
  </svg>
  <span>選択肢</span>
</label>