需要使用色 #ec6337(当然可以是任意颜色),解决问题:记住密码定制 CheckBox,解释全在注释里
主要使用到 ::before 或 ::after 伪类处理,伪装成内部的那个勾
- html
<label>
<input type="checkbox" /> // 注意嵌在 label 里面
记住密码
<div class="show-box" /> // 注意嵌在 label 里面
</label>
- CSS(LESS)
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); // 定制宽高加上旋转可以伪装内部的白色勾
}
}
时间: 2024-10-09 16:19:40