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

角丸四角チェックボックス(未/済)

未選択と選択済みを並べたシンプルな角丸チェックボックス。同意欄やオプション選択欄のデザイン見本として使える。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d04-07-01-row{display:flex;gap:20px;align-items:center}
        .d04-07-01-box{width:36px;height:36px;border-radius:8px;border:2px solid #94a3b8;background:#fff;position:relative;display:inline-block}
        .d04-07-01-box.checked{border-color:#2563eb;background:#2563eb}
        .d04-07-01-box.checked::after{content:"";position:absolute;left:11px;top:6px;width:8px;height:16px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(40deg)}

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