登录要勾协议、问卷要选一项，浏览器自带的方框圆点难看还难统一。做法是：原生 checkbox / radio 还在，负责取值和提交；看得见的圆点、对勾用旁边的 label 或 span 画，靠 :checked 换样子。
入口是 index.html，样式在 css/formCheck.css。没有业务脚本，点选项靠 label 的 for 对上 input 的 id，或把控件包进同一个 label。
单选复选美化用到哪些文件
html 里引进样式：
页面主体是 .con 版心。复选效果1用 .check_box，效果2用 .loginCheckbox 加 .loginCheckboxInput，单选用 .radio_box。文案写在旁边的 em 里。维护时入口指到 index.html 就行。
结构骨架
同组单选的 name 必须一样，否则能同时选中多个，狂点也合不成一组。
复选框勾选样式如何写
效果1：.check_box 相对定位，里面原生 checkbox 还在，上面盖一块圆形 label。label 的 for 等于 input 的 id，点圆也能勾选。
未选中时灰边；悬停和选中改成橙色 #f78642。对勾不是字符，是 label:after 画两笔边框再 rotate(-45deg)，默认半透明，选中后 opacity: 1。可点区域加 cursor: pointer。
我第一次看也卡了一下：对勾那两笔要去掉 border-top、border-right，只留左和下，转完才像 ✓，四边都留会变成小方框。
颜色、尺寸按设计改。input 若被盖住点不到，检查 label 的 for / id 是否对上，或给 input 设透明度，别 display:none 掉还指望部分浏览器读不到——本例靠绝对定位的 label 承接点击即可。
另一种复选框样式如何写
效果2更常见于登录「记住密码」：原生框 display: none，旁边一个 .loginCheckboxInput 当假控件。选中后伪元素写出 \2713（对勾字符），绿色。
外层用 <label> 包住 input 和 span，点 span 等于点框。再加 .loginSpan 时，圆角改成 0，变成方框风格；不加则保持圆的。
说白了：一种用边框拼勾，一种用字符勾。项目里定一种风格即可，别同一表单混两套。
单选框样式如何写
.radio_box 同样相对定位，圆形 label 描红边 #ef4949。选中后 label:after 画一个实心小圆点居中，不是对勾。
同一组选项共用一个 name，例如 name="radio"。id 各自不同，对应各自的 label for。
这坑我见过不止一次：两组单选误用了同一个 name，选 A 组会把 B 组清掉。按业务字段拆 name，比如 sex、payType。
表单里如何套用这套单选复选样式
把 css/formCheck.css 引进业务页，按需要拷一段结构。协议勾选常用效果2；问卷多选、筛选条件用效果1或效果2二选一；性别、支付方式用 .radio_box。
name、value、id 按接口字段改。提交仍读原生 input 的选中状态，美化层不参与取值。颜色改 CSS 变量或直接改十六进制即可。
需要方框协议勾就把 .loginSpan 留着；要圆形勾选协议，去掉 loginSpan 只留 loginCheckboxInput。动态插入的选项同样带上这套类名，id / for 别重复。