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

インデント付きネストチェックボックス

親子関係をインデントで示す階層構造のチェックボックス。カテゴリ選択やフィルターツリーの表示に使える。

staticcss

プレビュー

ソースコード

HTML

<ul class="d04-07-08-list">
          <li class="d04-07-08-row parent">
            <span class="d04-07-08-box checked"></span>
            <span class="d04-07-08-label">親カテゴリ</span>
          </li>
          <li class="d04-07-08-row child">
            <span class="d04-07-08-box checked"></span>
            <span class="d04-07-08-label">子項目A</span>
          </li>
          <li class="d04-07-08-row child">
            <span class="d04-07-08-box"></span>
            <span class="d04-07-08-label">子項目B</span>
          </li>
        </ul>

CSS

.d04-07-08-list{list-style:none;margin:0;padding:0;width:100%;max-width:200px}
        .d04-07-08-row{display:flex;align-items:center;gap:8px;padding:5px 0}
        .d04-07-08-row.child{margin-left:24px}
        .d04-07-08-box{width:18px;height:18px;border-radius:4px;border:2px solid #94a3b8;background:#fff;position:relative;display:inline-block;flex:none}
        .d04-07-08-box.checked{border-color:#334155;background:#334155}
        .d04-07-08-box.checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg)}
        .d04-07-08-label{font-size:12px;color:#334155}

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