精选HTML网页评分星星选框排版代码-html教程-PHP中文网

纯css星级评分默认点击第n颗星会点亮前n颗，若要仅点亮当前星，需放弃:checked ~ label逻辑，改用每个input单独控制自身label，如input:nth-of-type(n):checked + label仅高亮对应星，并确保name统一、label精准关联、隐藏radio保留可访问性。

精选html网页评分星星选框排版代码

星星评分组件怎么让点击后只选中到当前星，不连带前面的？

默认用 input[type="radio"] 实现时，如果没加 name 属性或值不统一，点哪颗星都无效；加了但没处理好标签绑定，点星星本身没反应，只能点文字。关键在 name 必须相同，且每颗星的 input 要用 label[for] 或包裹方式精准关联。

实操建议：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

5 颗星对应 5 个 input[type="radio"]，name 值完全一致（如 name="rating"）
每颗星用 label 包裹 input 和图标（避免依赖 for 属性出错）
隐藏原生 input（position: absolute; opacity: 0），用 ::before 或 SVG 控制显示
不要用 click JS 手动设 checked —— 这会破坏表单原生提交逻辑，且移动端容易失焦

纯 CSS 实现五星评分，怎么兼容 Safari 和旧版 iOS？

Safari 对 :checked + selector 的链式选择器支持没问题，但对相邻兄弟选择器（~）在某些 iOS 版本里有渲染延迟或失效。尤其当星星用 inline-block 排列、又加了过渡动画时，点完可能只高亮最后一颗。

实操建议：

放弃 ~ 选中所有前序星，改用每个 input 单独控制自身及后续星：比如第 3 颗被选中时，用 input:nth-of-type(3):checked ~ input + input:nth-of-type(3):checked 双重声明
移除 transition 中的 all，只写 transition: color 0.2s, opacity 0.15s，避免 Safari 渲染卡顿
给容器加 transform: translateZ(0) 强制硬件加速（iOS 12–14 有效）
测试时务必在真机 iOS 13–15 上验证，模拟器常表现正常但实际点击区域偏移

用户点了 3 星，怎么让表单提交时只发数字 3 而不是字符串 "3"？

input[value] 默认是字符串，后端接收时类型错乱很常见。更麻烦的是，如果用了自定义属性（如 data-value="3"）再靠 JS 取值，就绕过了原生表单序列化逻辑，FormData 拿不到值。

实操建议：

直接用 value="3"（数字字符串），服务端解析时转整型即可 —— 这是最轻量也最兼容的做法
如果必须传 number 类型，用 submit 事件拦截：new FormData(form).set("rating", Number(formData.get("rating")))
别在 input 上写 value={3}（JSX 语境下），HTML 模板里老老实实写 value="3"
校验时注意空值：未点星时 formData.get("rating") 是 null，不是 "" 或 "0"