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

顔文字(絵文字)スケール評価入力

表情の絵文字を5段階に並べた満足度入力欄。アンケートフォームやNPS調査の直感的な評価選択UIに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-03-row">
          <span class="d04-13-03-face">&#128542;</span>
          <span class="d04-13-03-face">&#128533;</span>
          <span class="d04-13-03-face selected">&#128528;</span>
          <span class="d04-13-03-face">&#128578;</span>
          <span class="d04-13-03-face">&#128516;</span>
        </div>

CSS

.d04-13-03-row{display:flex;gap:10px}
        .d04-13-03-face{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;background:#f8fafc;border:2px solid transparent}
        .d04-13-03-face.selected{background:#fef9c3;border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.15)}

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