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

絵文字選択済みの満足度アンケート

顔文字アイコンの中から1つが選択された状態を固定表示した満足度アンケート。カジュアルなフィードバックフォームに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-15-08-card">
          <p class="d04-15-08-q">サービス全体の満足度は?</p>
          <div class="d04-15-08-row">
            <span class="d04-15-08-emoji">&#128542;</span>
            <span class="d04-15-08-emoji">&#128528;</span>
            <span class="d04-15-08-emoji selected">&#128522;</span>
            <span class="d04-15-08-emoji">&#128512;</span>
            <span class="d04-15-08-emoji">&#129321;</span>
          </div>
        </div>

CSS

.d04-15-08-card{width:100%;max-width:250px;text-align:center}
        .d04-15-08-q{font-size:12.5px;color:#334155;font-weight:600;margin-bottom:14px}
        .d04-15-08-row{display:flex;gap:8px;justify-content:center}
        .d04-15-08-emoji{font-size:24px;padding:6px;border-radius:50%;opacity:.4;display:inline-block}
        .d04-15-08-emoji.selected{opacity:1;background:#fef3c7;box-shadow:0 0 0 2px #fbbf24}

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