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

アウトラインのみチェックボックス(塗りなし)

背景を塗りつぶさずチェックマークの色だけで選択状態を示す見本。ミニマルなデザインの同意欄などに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-11-row">
          <span class="d04-07-11-box"></span>
          <span class="d04-07-11-box checked"></span>
        </div>

CSS

.d04-07-11-row{display:flex;gap:20px;align-items:center}
        .d04-07-11-box{width:34px;height:34px;border-radius:8px;border:2px solid #cbd5e1;background:transparent;position:relative;display:inline-block}
        .d04-07-11-box.checked{border-color:#dc2626}
        .d04-07-11-box.checked::after{content:"";position:absolute;left:10px;top:5px;width:8px;height:16px;border-right:3px solid #dc2626;border-bottom:3px solid #dc2626;transform:rotate(40deg)}

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