フォーム入力
星評価
星にホバー(PC)またはタップ(スマホ)で評価を選択。選んだ値をテキストで表示する。
プレビュー
クリック
操作クリック/タップで動きます。
コード(コピーして使えます)
<div class="sr-wrap">
<p class="sr-label">評価を選んでください</p>
<div class="sr-stars" id="sr-stars" role="group" aria-label="星評価">
<button class="sr-star" type="button" data-v="1" aria-label="1つ星">★</button>
<button class="sr-star" type="button" data-v="2" aria-label="2つ星">★</button>
<button class="sr-star" type="button" data-v="3" aria-label="3つ星">★</button>
<button class="sr-star" type="button" data-v="4" aria-label="4つ星">★</button>
<button class="sr-star" type="button" data-v="5" aria-label="5つ星">★</button>
</div>
<p class="sr-value" id="sr-value">未選択</p>
</div>