layui单选框怎么实现星级评分样式-Layui教程-PHP中文网

layui单选框默认不支持星级评分，需通过css隐藏原生radio并用伪元素或图标替换为星星，保持name一致和label包裹以确保表单校验与提交正常。

layui单选框怎么实现星级评分样式

layui 单选框默认不支持星级评分样式

layui 的 radio 组件本身只渲染为圆点单选按钮，没有内置星级（★）视觉样式。想用单选框实现星级评分，本质是「用 radio 控件做底层逻辑，自己覆盖 UI 层」——不能直接靠 lay-radio 渲染出星星，得手动替换节点或借助自定义模板。

用 HTML + CSS 覆盖 radio 样式，配合 layui 表单校验

核心思路：保留 <input type="radio"> 结构（确保 form.verify 和 form.on('submit') 能正常取值），用 CSS 隐藏原生按钮，用伪元素或图标生成星星，并绑定 hover/checked 状态。

必须给每个 input 设置相同的 name（如 score），否则无法互斥
用 label 包裹 input 和显示的星星（比如 ★ 或 <i class="layui-icon"></i>），点击 label 才能触发选中
CSS 中用 input[type="radio"]:checked + label .star 或 input[type="radio"]:checked ~ .star 控制高亮逻辑（注意兄弟选择器的 DOM 顺序）
layui 的 form.render('radio') 不影响自定义样式，但表单提交时 form.val('formFilter') 仍能读到正确的 score 值

避免踩坑：disabled 状态、移动端点击区域、IE 兼容性

原生 radio 的 disabled 在自定义样式下容易失效，且小星星在手机上点不中——这些不是 layui 的锅，而是覆盖样式时常见的疏漏。

layui手机车牌号码键盘代码

layui手机车牌号码键盘代码是一款基于jQuery跟layui制作的手机端车牌号码输入弹出键盘选择，支持新能源汽车车牌输入格式代码。

下载

禁用状态要同时加 disabled 属性和 CSS pointer-events: none; opacity: .6;
每个星星的 label 宽度至少设为 30px，内部 display: inline-block，防止 iOS Safari 点击失灵
IE11 不支持 flex 布局星星行，建议用 inline-block + vertical-align: middle
不要用 font-size 直接缩放 ★，不同字体下 ★ 渲染差异大；优先用 layui 图标  或 SVG

示例结构（可直接粘贴进 layui 页面）

<div class="layui-form-item">
  <label class="layui-form-label">评分</label>
  <div class="layui-input-block">
    <input type="radio" name="score" value="1" title="1星" lay-filter="score"><input type="radio" name="score" value="2" title="2星" lay-filter="score"><input type="radio" name="score" value="3" title="3星" lay-filter="score"><input type="radio" name="score" value="4" title="4星" lay-filter="score"><input type="radio" name="score" value="5" title="5星" lay-filter="score">
</div>
</div>

然后用 CSS 把这五个 input 后面的 label 替换成星星，再写 hover/checked 样式。关键是别动 name 和 value，layui 表单方法才能识别。

真正麻烦的不是画星星，而是让五颗星在各种分辨率、各种浏览器里都响应准确、状态同步、不和 layui 的 form 模块冲突——细节全在 CSS 选择器顺序和事件冒泡控制上。