纯 CSS 解决自定义 CheckBox 背景颜色问题

<label> ?<input type="checkbox" /> // 注意嵌在 label 里面 ?记住密码 ?<div class="show-box" /> // 注意嵌在 label 里面</label>

label { ?position: relative; ?cursor: pointer; ?input { ???cursor: pointer; ?} ?input:checked + .show-box { ???background: white; // 这里取个巧，与下面颜色一样而已 ?} ?.show-box { ???position: absolute; ???top: 1px; ???left: 1px; ???width: 16px; ???height: 16px; ???border-radius: 2px; ???background: #ec6337; ???&:before { // 使用了 absolute 所以无所谓是 before 还是 after ?????content: ‘‘; // 空白内容占位，当做盒模型处理，见下面 ?????position: absolute; ?????top: 2px; ?????left: 6px; ?????width: 3px; // 勾的短边 ?????height: 8px; // 勾的长边 ?????border: solid white; // 勾的颜色 ?????border-width: 0 2px 2px 0; // 勾的宽度 ?????transform: rotate(45deg); // 定制宽高加上旋转可以伪装内部的白色勾 ???} ?}