パーツ番号 09-11-11 ・ CSSのみ

表情アイコン評価(5段階・固定選択)

星の代わりに表情アイコンで満足度を示す評価表示。アンケート結果やレビューまとめページの親しみやすい評価欄に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="emo" aria-label="5段階中4(やや満足)">
          <i>😞</i><i>🙁</i><i>😐</i><i class="on">🙂</i><i>😄</i>
        </div>

CSS

.d09-11-11 .emo{ display:flex; gap:8px; }
        .d09-11-11 .emo i{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-style:normal; background:#f4f5f7; opacity:.4; }
        .d09-11-11 .emo i.on{ background:#fff4de; opacity:1; box-shadow:0 0 0 2px #f5a623 inset; }

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