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

5段階ラベル付き評価入力(とても悪い〜とても良い)

ラジオ風のドットとラベルを縦に並べた5段階評価入力欄。満足度アンケートや商品レビューフォームに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-08-list">
          <div class="d04-13-08-opt"><span class="d04-13-08-dot"></span>とても悪い</div>
          <div class="d04-13-08-opt"><span class="d04-13-08-dot"></span>悪い</div>
          <div class="d04-13-08-opt"><span class="d04-13-08-dot"></span>普通</div>
          <div class="d04-13-08-opt"><span class="d04-13-08-dot"></span>良い</div>
          <div class="d04-13-08-opt selected"><span class="d04-13-08-dot"></span>とても良い</div>
        </div>

CSS

.d04-13-08-list{display:flex;flex-direction:column;gap:6px;width:200px}
        .d04-13-08-opt{display:flex;align-items:center;gap:10px;font-size:12px;color:#475569;padding:7px 10px;border-radius:8px}
        .d04-13-08-opt.selected{background:#eef2ff;color:#4338ca;font-weight:700}
        .d04-13-08-dot{width:16px;height:16px;border-radius:50%;border:2px solid #cbd5e1;background:#fff;flex:none;display:inline-block}
        .d04-13-08-opt.selected .d04-13-08-dot{border-color:#4338ca;background:#4338ca}

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