パーツ番号 04-15-03 ・ CSSのみ

複数選択済みチェックリスト

複数項目にチェックが入った状態を固定表示したリスト。購入理由アンケートや要望調査の複数回答欄デザインに応用できる。

staticcss

プレビュー

ソースコード

HTML

<ul class="d04-15-03-list">
          <li class="d04-15-03-row checked"><span class="d04-15-03-box"></span><span class="d04-15-03-label">価格</span></li>
          <li class="d04-15-03-row checked"><span class="d04-15-03-box"></span><span class="d04-15-03-label">品質</span></li>
          <li class="d04-15-03-row"><span class="d04-15-03-box"></span><span class="d04-15-03-label">デザイン</span></li>
          <li class="d04-15-03-row checked"><span class="d04-15-03-box"></span><span class="d04-15-03-label">サポート体制</span></li>
        </ul>

CSS

.d04-15-03-list{list-style:none;margin:0;padding:0;width:100%;max-width:220px}
        .d04-15-03-row{display:flex;align-items:center;gap:10px;padding:7px 0}
        .d04-15-03-box{width:18px;height:18px;border-radius:5px;border:2px solid #cbd5e1;background:#fff;position:relative;display:inline-block;flex:none}
        .d04-15-03-row.checked .d04-15-03-box{border-color:#059669;background:#059669}
        .d04-15-03-row.checked .d04-15-03-box::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-15-03-label{font-size:12.5px;color:#334155}

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