コピペで使えるCSSとSVG画像でチェックボックスのデザイン6種類

• ホーム
• Javascript,CSS,HTML,PHPのデザイン無料素材集
• コピペで使えるCSSとSVG画像でチェックボックスのデザイン6種類

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

cssとsvg画像とindex type=checkboxを組み合わせると、オリジナルのチェックボックスを作成することが出来ます。

四角枠のSVGアイコンを使ったオリジナルチェックボックス

角丸四角枠のSVGアイコンを使ったオリジナルチェックボックス

丸枠のSVGアイコンを使ったオリジナルチェックボックス

四角枠の電源のSVGアイコンを使ったオリジナルチェックボックス

丸枠の電源のSVGアイコンを使ったオリジナルチェックボックス

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

htmlとcss

<style>
  .fontsize24px{
    font-size:24px;
  }
  .mam-svg-chkbox {
    display: none;
  }
  .mam-svg-chkbox-on{
    display: none;
    width:1em;
    height:1em;
  }
  .mam-svg-chkbox-off{
    display: inline-block;
    width:1em;
    height:1em;
  }
  .mam-svg-chkbox-text{
    user-select: none;
  }
  .mam-svg-chkbox:checked ~ .mam-svg-chkbox-on{
    display: inline-block;
  }
  .mam-svg-chkbox:checked ~ .mam-svg-chkbox-off{
    display: none;
  }
</style>


<p>四角枠のSVGアイコンを使ったオリジナルチェックボックス</p>
<div class="fontsize24px">
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1" />
    <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="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" class="mam-svg-chkbox-off">
      <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>
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <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" class="mam-svg-chkbox-off">
      <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 class="mam-svg-chkbox-text">選択肢２</span>
  </label>
</div>


<p>角丸四角枠のSVGアイコンを使ったオリジナルチェックボックス</p>
<div class="fontsize24px">
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <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" 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" class="mam-svg-chkbox-off">
      <rect style="fill:#EEE;stroke:#666;stroke-width:2;" x="4" y="4" width="56" height="56" rx="16" ry="16" />
    </svg>
    <span class="mam-svg-chkbox-text">選択肢１</span>
  </label>
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <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" class="mam-svg-chkbox-off">
      <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 class="mam-svg-chkbox-text">選択肢２</span>
  </label>
</div>


<p>丸枠のSVGアイコンを使ったオリジナルチェックボックス</p>
<div class="fontsize24px">
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <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" class="mam-svg-chkbox-off">
      <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
    </svg>
    <span class="mam-svg-chkbox-text">選択肢１</span>
  </label>
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <circle style="fill:#333;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <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" class="mam-svg-chkbox-off">
      <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <path d="M12,32 L24,48 L48,20" style="fill:none;stroke:#FFF;stroke-width:8;stroke-linecap:square;stroke-linejoin:miter;" />
    </svg>
    <span class="mam-svg-chkbox-text">選択肢２</span>
  </label>
</div>

<p>四角枠の電源のSVGアイコンを使ったオリジナルチェックボックス</p>
<div class="fontsize24px">
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <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>
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <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" class="mam-svg-chkbox-off">
      <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 class="mam-svg-chkbox-text">選択肢２</span>
  </label>
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <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:#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" 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:#888;stroke-width:8;" />
      <line style="fill:#none;stroke:#888;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
    </svg>
    <span class="mam-svg-chkbox-text">選択肢３</span>
  </label>
</div>

<p>丸枠の電源のSVGアイコンを使ったオリジナルチェックボックス</p>
<div class="fontsize24px">
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <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">
      <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <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>
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <circle style="fill:#26F;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <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" class="mam-svg-chkbox-off">
      <circle style="fill:#F44;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <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 class="mam-svg-chkbox-text">選択肢２</span>
  </label>
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <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" class="mam-svg-chkbox-off">
      <circle style="fill:#EEE;stroke:#666;stroke-width:2;" cx="32" cy="32" r="28" />
      <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 class="mam-svg-chkbox-text">選択肢３</span>
  </label>
</div>

<p>四角枠のメールのSVGアイコンを使ったオリジナルチェックボックス</p>
<div class="fontsize24px">
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <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="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" class="mam-svg-chkbox-off">
      <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 class="mam-svg-chkbox-text">選択肢１</span>
  </label>
  <label>
    <input type="checkbox" class="mam-svg-chkbox" value="1">
    <svg viewBox="0 0 64 64" class="mam-svg-chkbox-on">
      <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" class="mam-svg-chkbox-off">
      <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 class="mam-svg-chkbox-text">選択肢２</span>
  </label>
</div>