css多选框方形 |菜单按钮 css样式

/*html*/
<input type="checkbox" id="checkbox1" name="check1">
<label for="checkbox1"></label>
/*css*/
input[type="checkbox"] {
display: none;
}
label {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
margin-right: 5px;
}
input[type="checkbox"]:checked + label:before {
content: "\2713";
display: block;
text-align: center;
font-size: 16px;
}
label:before {
content: "";
display: block;
width: 18px;
height: 18px;
margin: 1px;
border: 1px solid transparent;
border-radius: 3px;
font-size: 0;
line-height: 16px;
}

实现思路

1. 首先，将复选框的显示属性设置为none，消除原本的样式；

2. 在label标签中设置选框的样式，边框的颜色和大小，在margin-right属性中给选框右侧留出一些空白；

3. 在label:before中设置实心勾选符号的样式，将其按中心对齐，并设置字号；

4. 使用:checked选择器为选中的复选框添加样式，即在勾选框前加上实心勾。

总体思路是将原生的复选框设计成一个自己定义的勾选框，利用:before选择器以及:checked状态实现选择标记。