Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<fieldset class="tbx-1055"><legend>サービスの満足度</legend><div class="tbx-1055__stars">
<label><input type="radio" name="tbx-1055-score" value="5"><span aria-hidden="true">★</span><span class="tbx-1055__sr">5点</span></label>
<label><input type="radio" name="tbx-1055-score" value="4"><span aria-hidden="true">★</span><span class="tbx-1055__sr">4点</span></label>
<label><input type="radio" name="tbx-1055-score" value="3"><span aria-hidden="true">★</span><span class="tbx-1055__sr">3点</span></label>
<label><input type="radio" name="tbx-1055-score" value="2"><span aria-hidden="true">★</span><span class="tbx-1055__sr">2点</span></label>
<label><input type="radio" name="tbx-1055-score" value="1"><span aria-hidden="true">★</span><span class="tbx-1055__sr">1点</span></label>
</div><p>星を選択してください</p></fieldset>
CSS
.tbx-1055{border:0;margin:0;padding:5px 0;width:min(250px,100%);font-family:system-ui;color:#425668;text-align:center}.tbx-1055 legend{font-size:12px;font-weight:750;margin:0 auto 10px}.tbx-1055__stars{display:flex;flex-direction:row-reverse;justify-content:center;gap:5px}.tbx-1055 label{position:relative;display:block;cursor:pointer}.tbx-1055 label input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.tbx-1055 label span[aria-hidden]{display:block;font-size:34px;color:#d8e0e5;line-height:1.25;text-shadow:0 2px 4px #34475a10;transition:color .19s,transform .19s}.tbx-1055 label:has(input:checked) span[aria-hidden],.tbx-1055 label:has(input:checked)~label span[aria-hidden]{color:#e9a847}.tbx-1055 label:is(:hover,:focus-within) span[aria-hidden],.tbx-1055 label:hover~label span[aria-hidden]{color:#eeac3f;transform:scale(1.12)}.tbx-1055 input:focus-visible+span{outline:2px solid #2c7f8a;outline-offset:2px;border-radius:4px}.tbx-1055 p{font-size:10px;color:#8492a0;margin:13px 0 0}.tbx-1055__sr{position:absolute;overflow:hidden;width:1px;height:1px;clip-path:inset(50%)}
@media(prefers-reduced-motion:reduce){.tbx-1055 label span[aria-hidden]{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Review / Form
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。