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

単一選択でカードがハイライト

カードをクリックすると枠と背景色が変わり選択状態が一目で分かります。プラン選択やアンケートの単一回答項目にそのまま使えます。

clickjs

プレビュー

ソースコード

HTML

<div class="d04-14-03-wrap">
          <p class="d04-14-03-q">現在のご利用プランは?</p>
          <div class="d04-14-03-cards">
            <button type="button" class="d04-14-03-card">無料</button>
            <button type="button" class="d04-14-03-card">スタンダード</button>
            <button type="button" class="d04-14-03-card">プレミアム</button>
          </div>
        </div>

CSS

.d04-14-03-wrap{width:min(280px,100%)}
        .d04-14-03-q{margin:0 0 12px;font-size:13px;color:#333;font-weight:700}
        .d04-14-03-cards{display:flex;flex-direction:column;gap:8px}
        .d04-14-03-card{
          padding:12px 14px;font-size:13px;font-weight:700;color:#444;text-align:left;
          background:#fff;border:2px solid #d5d9e0;border-radius:10px;cursor:pointer;
          transition:border-color .2s,background .2s,color .2s,transform .15s;
        }
        .d04-14-03-card:hover{border-color:#a9b8e8}
        .d04-14-03-card.is-active{border-color:#4a6cf7;background:#eef2ff;color:#4a6cf7;transform:translateX(3px)}

JavaScript

(function(){
        var wrap=document.querySelector('.d04-14-03-wrap');
        if(!wrap)return;
        var cards=wrap.querySelectorAll('.d04-14-03-card');
        cards.forEach(function(c){
          c.addEventListener('click',function(){
            cards.forEach(function(o){o.classList.remove('is-active');});
            c.classList.add('is-active');
          });
        });
      })();

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