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">選択肢1</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">選択肢2</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">選択肢1</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">選択肢2</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">選択肢1</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">選択肢2</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">選択肢1</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">選択肢2</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">選択肢3</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">選択肢1</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">選択肢2</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">選択肢3</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">選択肢1</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">選択肢2</span> </label> </div>