コピペで使えるCSSとSVGでチェックボックス18種類

CSSとSVG画像でオリジナルのチェックボックスを作成する

cssとsvg画像とindex type=checkboxを組み合わせると、オリジナルのチェックボックスを作成することが出来ます。
CSSは共通で以下をコピペしてください。

<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>