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

カラーバリエーション付きチェックボックス

複数の配色のチェック済みボックスを並べたバリエーション見本。カテゴリごとの色分けタグ選択などに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-06-row">
          <span class="d04-07-06-box c1"></span>
          <span class="d04-07-06-box c2"></span>
          <span class="d04-07-06-box c3"></span>
          <span class="d04-07-06-box c4"></span>
        </div>

CSS

.d04-07-06-row{display:flex;gap:14px}
        .d04-07-06-box{width:32px;height:32px;border-radius:8px;position:relative;display:inline-block}
        .d04-07-06-box::after{content:"";position:absolute;left:9px;top:5px;width:7px;height:14px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(40deg)}
        .d04-07-06-box.c1{background:#ef4444}
        .d04-07-06-box.c2{background:#f59e0b}
        .d04-07-06-box.c3{background:#10b981}
        .d04-07-06-box.c4{background:#3b82f6}

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