纯 html + css 星星评分条可通过 radio 按钮隐式绑定与 :checked 伪类实现无 js 交互，需反向 dom 排序、unicode 星号、扩大热区并保留语义化 label 以保障可访问性。

用纯 HTML + CSS 实现可点击的星星评分条

不需要 JavaScript 就能做出基础交互，关键在 <input type="radio"> 的隐式绑定和 :checked 伪类。浏览器原生支持，兼容性好，加载快，适合表单提交场景。

常见错误是直接用 <div> 拼星星再加 JS 监听——既增加体积，又容易漏掉键盘焦点、空格/回车触发等可访问性细节。 <ul> <li>5 颗星必须用同一组 <code>name 的 <input type="radio">，值从 1 到 5

每颗星用 <label></label> 包裹对应 input，并设置 for 或嵌套结构，点击标签即选中 radio

用 input[type="radio"]:checked ~ label 或相邻兄弟选择器控制已选及左侧星星样式（注意顺序）

默认隐藏 input（position: absolute; opacity: 0），用 label::before 绘制星星图标

CSS 星星图标用 Unicode 还是 SVG？

初学者优先用 Unicode ★（实心）和 ☆（空心），零依赖、易调试、字体 fallback 可控。SVG 更灵活但需处理尺寸对齐和颜色继承问题。

别写 content: "★"; 然后发现乱码——确保 HTML 声明了 UTF-8：<meta charset="UTF-8">。另外，部分系统字体（如 Windows 的 Segoe UI）对这些符号渲染偏小，建议加 font-size 和 line-height 统一控制。

• Unicode 方案：用 label::before { content: "\2605"; }（十六进制更稳）
• 避免用图片，否则响应式缩放易模糊，且无法通过 CSS 改颜色
• 如果必须用 SVG，把它内联为 background-image: url("data:image/svg+xml,...")，省去 HTTP 请求

为什么点击第 3 颗星，前 3 颗都亮，但第 4、5 颗不响应？

这是 DOM 顺序和 CSS 选择器限制导致的。CSS 无法“向上”选择父级或前面的兄弟元素，所以标准做法是把 input 放在 label 前面，并用 input:checked ~ label 选中它之后的所有 label，再配合 input:checked + label 逐个覆盖右侧状态。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

更稳妥的做法是反向排列 DOM：第 5 颗星的 input 写在最前，第 1 颗写在最后，这样 :checked ~ label 就能自然覆盖“≤当前值”的所有星星。

• DOM 顺序应为：input[value="5"] → label[for="5"] → input[value="4"] → label[for="4"] ……
• 对应 CSS：input[value="5"]:checked ~ label, input[value="4"]:checked ~ label, ... 不用写全，用通配即可
• 别依赖 :hover 模拟高亮——用户没悬停时无法预览效果，也不符合表单语义

移动端点不准、iOS Safari 不响应点击？

本质是 iOS Safari 对小于 44×44px 的可点击区域有最小触控限制，而默认 Unicode 星星太小。不是 bug，是规范行为。

解决方式不是加 JS，而是用 CSS 扩大点击热区：给 label 设 min-width、padding，同时保持视觉大小不变（用 transform: scale() 缩小内容）。这样热区够大，UI 也不变形。

• 给每个 label 加 display: inline-block; min-width: 44px; height: 44px;
• 星星图标用 font-size: 24px，再用 transform: scale(0.8) 微调视觉比例
• 务必加 cursor: pointer 和 -webkit-tap-highlight-color: transparent 提升手感
• 测试时真机连 Safari 开发者工具，别只靠 Chrome 模拟器

真正难的是让键盘用户也能操作：按 Tab 进入、空格/回车确认、方向键切换。这需要 radio 组天然支持，但很多人删掉了 label 或用了 div 模拟，就彻底断掉了可访问链路。