5 段階星評価フォーム
星評価フォームは、5 つの星をホバーやクリックで塗りつぶして 満足度を 1 〜 5 で選ぶ 入力 UI です。技術的な肝は、星を direction:rtl で右から左へ並べ、ラジオボタンを隠したうえで label:hover ~ label や input:checked ~ label という兄弟セレクタを使う…
解説
星評価フォームは、5 つの星をホバーやクリックで塗りつぶして満足度を 1 〜 5 で選ぶ入力 UI です。技術的な肝は、星を direction:rtl で右から左へ並べ、ラジオボタンを隠したうえで label:hover ~ label や input:checked ~ label という兄弟セレクタを使う点です。これにより、ある星にカーソルを乗せると、それ自身とそれより評価の低い星までまとめて色が変わる、自然な「左から塗られる」見た目を JavaScript なしで実現しています。星のかたちはインライン SVG で描かれています。
使う場面
- 購入後の商品レビュー入力
- サービス満足度アンケート
- 記事やコンテンツの評価ウィジェット
選択中の色は :checked 系のルールの color、ホバー色は別途指定でき、好みのトーンに調整できます。SVG の viewBox を保てば星の大きさは font-size で一括変更できます。注意点として、見た目はラジオボタンが土台なので、フォーカスリングを残すとキーボードでも操作しやすくなり、aria-label で「5 段階中 4」などを補うとスクリーンリーダーにも伝わります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
なぜ星が右から左の順で並んでいるのですか？
CSS の兄弟セレクタは後ろの要素しか狙えないため、direction:rtl で並びを反転させ、ホバーした星と「それより低い評価の星」をまとめて塗るトリックを使っています。見た目は左から塗られているように見え、JavaScript は不要です。
星の色や大きさを変えられますか？
選択時の色は :checked 系ルールの color、未選択の色は label の color で指定しています。大きさは SVG が font-size に追従するため、font-size の値を変えるだけで全体のサイズを一括で調整できます。