パーツ番号 04-14-10 ・ JavaScript使用

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

絵文字をクリックすると選ばれたものだけ拡大表示されます。カジュアルなアプリ内アンケートやイベント後の一言アンケートに向きます。

clickjs

プレビュー

ソースコード

HTML

<div class="d04-14-10-wrap">
          <span class="d04-14-10-label">今日の気分は?</span>
          <div class="d04-14-10-faces">
            <button type="button" class="d04-14-10-face" data-v="1">😢</button>
            <button type="button" class="d04-14-10-face" data-v="2">😐</button>
            <button type="button" class="d04-14-10-face" data-v="3">🙂</button>
            <button type="button" class="d04-14-10-face" data-v="4">😄</button>
            <button type="button" class="d04-14-10-face" data-v="5">🤩</button>
          </div>
        </div>

CSS

.d04-14-10-wrap{width:min(280px,100%);text-align:center}
        .d04-14-10-label{display:block;margin:0 0 14px;font-size:12px;color:#8a93a3}
        .d04-14-10-faces{display:flex;justify-content:center;gap:8px}
        .d04-14-10-face{
          font-size:22px;background:none;border:2px solid transparent;border-radius:10px;
          padding:6px;cursor:pointer;opacity:.45;transition:opacity .2s,transform .2s,border-color .2s;
        }
        .d04-14-10-face.is-active{opacity:1;transform:scale(1.3);border-color:#4a6cf7}

JavaScript

(function(){
        var wrap=document.querySelector('.d04-14-10-wrap');
        if(!wrap)return;
        var faces=wrap.querySelectorAll('.d04-14-10-face');
        faces.forEach(function(f){
          f.addEventListener('click',function(){
            faces.forEach(function(o){o.classList.remove('is-active');});
            f.classList.add('is-active');
          });
        });
      })();

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