登录要勾协议、问卷要选一项浏览器自带的方框圆点难看还难统一。做法是原生 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对勾字符绿色。外层用包住 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 别重复。
