纯CSS实现Radio与Checkbox样式美化

纯 CSS 写的 radio 和 checkbox 样式美化，挺适合不想引入 JS 的项目。默认样式太古板，在移动端或一些视觉要求高的页面，实在不太够看。这个资源就是用 CSS3 搞定全部交互效果，比如勾选、选中状态的变化啥的，响应也快，兼容性也还行。

用:checked配合+ label::before，基本就能替换掉浏览器原生的样式。图标、背景、边框你都能自己控制，甚至还能加点过渡动画，点起来更顺滑。视觉反馈也能提升不少用户体验。

像你要做个清爽风格的注册页，就可以直接把原生 checkbox 隐藏掉，用 label 伪元素替代展示。用下面这段：

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  background-color: #fff;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked + label::before {
  background-color: #007BFF;
  border-color: #007BFF;
}

你甚至可以配合Font Awesome来搞个勾选图标，挺好看的。视觉干净，交互清晰，完全够用。需要更花哨的？可以加渐变、阴影、动画啥的，CSS3 这些全支持。

如果你项目想做到不依赖 JS 又有点视觉效果，这套样式用得上。还可以看看这些资源拓展下灵感：

• 纯 css3 漂亮的 checkbox 和 radio 美化效果
• 使用纯 CSS 美化 radio 和 checkbox
• css3 制作 checkbox 单选按钮美化代码.zip
• 11 种炫酷 CSS3 复选框 checkbox 样式美化效果

如果你在做响应式后台、问卷、表单页面，可以试着把这套样式嵌进去试试看，调起来也不难。