如何制作HTML商品评分星级显示效果？

本文共计1175个文字，预计阅读时间需要5分钟。

商品评分显示不需要JavaScript就能做，但必须使用标签。

为什么不能直接写 ★★★★☆

纯字符堆砌看起来像评分，实则只是静态文本：点击无效、无法提交、document.querySelector('input[name="score"]:checked') 查不到值、移动端双击放大、高对比度模式下可能消失。更严重的是，它完全绕过了表单语义——浏览器和辅助技术根本不知道这是个“可选的评分控件”。

常见错误包括：

• 把 <label> 写在 <input> 前面（input:checked + label 失效）
• 用 display: none 隐藏 <input>（脱离可访问性树，tab 键跳过、屏幕阅读器忽略）
• 所有 <input> 的 name 不一致（导致只能选一颗星，无法互斥）

怎么让 5 颗星从右往左排列并正确响应 :checked

关键在 direction: rtl 和 DOM 顺序配合。把 value="5" 的 <input> 放最左，value="1" 放最右，再用 direction: rtl 让视觉顺序反转——这样 input[value="3"]:checked ~ label 才能命中前 3 颗星（即视觉上最右边的三颗）。