CSS---自定义复选框

参考地址浏览器默认的复选框样式一般是这样的：有时候，项目由于用户体验需求（仅用户体验）需要对复选框进行美化，让它看起来更赏心悦目，就要用css来“改造”一下。思路是这样的：在复选框旁边添加一个label标签，使用for属性与复选框进行关联。通过复选框的选中状态改变label标签的样式。隐藏复选框，让用户只能看到label标签样式的变化。我们开始做吧！首先，复选框一般是这样的：然后，添加label标签：最后添加样式：/*"+"代表相邻元素，即当前元素的下一个元素*/#myCheckbox+label{width:16px;高度：16px；显示：弹性；对齐内容：居中；对齐项目：居中；背景色：#c00；cursor:pointer;}/*":"表示当前输入框的值，勾选*/#myCheckbox:checked+label::before{content:"\2714";白颜色;font-size:12px;}input[type=checkbox]{display:none;}最终效果：