星評価入力
星評価入力は、5 つの星から好きな数をクリックして評価を選べるフォーム部品です。仕組みの中心は隠したラジオボタンで、星はそれぞれ label と SVG で描いています。 flex-direction:row-reverse で星を逆順に並べ、 :hover と隣接セレクタを組み合わせることで、カーソルを乗せた星と…
解説
星評価入力は、5 つの星から好きな数をクリックして評価を選べるフォーム部品です。仕組みの中心は隠したラジオボタンで、星はそれぞれ label と SVG で描いています。flex-direction:row-reverse で星を逆順に並べ、:hover と隣接セレクタを組み合わせることで、カーソルを乗せた星とその左側すべてを黄色く光らせています。JavaScript なしで、選択も見た目の連動も成立しているのが特徴です。
向いている使いどころ
- 商品レビューや感想フォームでの満足度入力
- アンケートやフィードバックの 5 段階評価
- お気に入り度やおすすめ度の登録欄
星の色は label:hover と input:checked~label の color でまとめて変えられ、大きさは .rt の font-size ひとつで調整できます。ラジオボタンを使っているので送信時に値も自然に取れて扱いやすい設計です。隠した入力でもキーボードで操作できるよう、見た目だけ消して読み上げには残す配慮をしておくと、すべての利用者が選びやすくなります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
星の数や色は変えられますか
色はホバー時とチェック時の color をまとめて差し替えれば変わります。大きさは .rt の font-size ひとつで拡大縮小でき、星の数を増やすときはラジオと label のセットを追加します。
JavaScript なしで動きますか
はい。隠したラジオボタンと CSS の隣接セレクタだけで、ホバー時のプレビューと選択の保持を実現しています。送信フォームに置けば選んだ値もそのまま取得できます。