パーツ番号 04-07-05 ・ CSSのみ

チェックマークSVG付きチェックボックス

SVGアイコンではっきりとしたチェックマークを表示するボックス。フォームの完了項目表示に向いたデザイン。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-05-row">
          <span class="d04-07-05-box">
            <svg viewBox="0 0 24 24" class="d04-07-05-svg"><path d="M4 12l5 5L20 6" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </span>
          <span class="d04-07-05-box off"></span>
        </div>

CSS

.d04-07-05-row{display:flex;gap:20px;align-items:center}
        .d04-07-05-box{width:38px;height:38px;border-radius:6px;background:#16a34a;display:flex;align-items:center;justify-content:center}
        .d04-07-05-box.off{background:#fff;border:2px solid #cbd5e1}
        .d04-07-05-svg{width:22px;height:22px}

クラス名 .d04-07-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。