纯HTML星级评分需用5个同name的radio按钮+对应label，input必须前置且隐藏（clip而非display:none），label紧随其后以支持:checked+label样式联动及可访问性。

用 实现可点击的星级评分

纯 HTML 星级评分本质是「隐藏单选按钮 + 用相邻兄弟选择器控制 label 样式」，核心靠 :checked 状态联动。不能只写

堆星星，那样无法获取值、不支持键盘操作、屏幕阅读器也读不到。

• 每颗星必须对应一个 ，name 相同，value 为 1–5
• 必须紧跟在对应 后面（顺序不能错），才能用 input:checked + label 触发样式
• 把 设为 position: absolute; clip: rect(0 0 0 0); 隐藏但保留可访问性，别用 display: none 或 visibility: hidden —— 这会让它彻底失效
• label 里放 ★ 符号或伪元素，用 font-size 控制大小，别用图片，否则缩放或高对比度模式下易出问题

为什么 label 一定要紧挨着 input？

因为 CSS 里只能用 +（相邻兄弟）或 ~（后续兄弟）选择器去匹配已选中的 input 后面的 label。如果中间插了其他标签，或者顺序颠倒，input:checked + label 就完全不生效 —— 你点半天，星星根本不亮。

• ✅ 正确：★
• ❌ 错误：★（顺序反了）
• ❌ 错误：提示★（中间有 ，+ 失效）

用 :checked ~ label 实现「悬停时高亮前面所有星」

原生单选框不支持 hover 时“点亮前几颗”，必须用 ~（后续兄弟选择器）配合结构设计：把所有 放最前面， 全部跟在后面，顺序为 input1 → input2 → … → label1 → label2 → …

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载

• 这样写 input:nth-of-type(3):hover ~ label 才能同时影响 label1、label2、label3
• 但注意：这种结构下，用户点 label3 实际选中的是 input3，而 input3 后面的 label 只有 label4、label5 —— 所以必须让每个 label 对应自己前面的 input，靠 for 和 id 绑定，不能只靠位置
• 移动端上 hover 无效，得补一层 JS 监听 touchstart 或用 :focus-within 做降级

表单提交时怎么拿到评分值？

和普通单选框完全一样：只要 在

内、有 name、且被选中，提交时就会带 name=value 参数。后端收到的就是数字字符串，比如 rate=4。

• 别忘了加 required 属性强制选择，否则可能提交空值
• 如果用 JS 读值，直接取 document.querySelector('input[name="rate"]:checked')?.value，别遍历所有 input
• 服务端别假设值一定是 "1"–"5" 字符串，要校验范围，防止恶意提交 rate=999

实际写的时候，最容易漏掉的是 for/id 绑定和隐藏 input 的方式。很多人图省事用 display: none，结果表单一提交就丢数据，还查不出原因。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！