自定义样式Checkbox实现
样式自由度更高的 checkbox 写法，前端开发时挺常用。原生的 checkbox 限制太多，比如勾选图标和边框基本动不了手。要想换个外观，就得来点小技巧。
用CSS把原生 checkbox 藏起来是第一步，display: none直接搞定。你可以加个来当“假 checkbox”，再配合:checked伪类让它能根据勾选状态换样式。响应也快，代码也不复杂。
JavaScript这块，主要是双向同步状态。原生 checkbox 的change事件监听一下，自定义元素状态就能跟着变。反过来，用户点自定义 checkbox 时，也用 JS 切换原生的checked。就这么来回套，视觉和功能都能兼顾。
需要注意的是，无障碍支持容易被忽略。自定义 checkbox 如果没绑定好label、aria这些属性，屏幕阅读器识别不到。要上线用的话，记得兼顾这一块。
如果你想看点现成的样式和代码案例，可以参考CSS3 美化 input checkbox和jQuery 实现自定义 checkbox这两个文章，思路也蛮实用的。
文件大小：115.28KB
评论区