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;
}

實(shí)現(xiàn)思路

1. 首先，將復(fù)選框的顯示屬性設(shè)置為none，消除原本的樣式；

2. 在label標(biāo)簽中設(shè)置選框的樣式，邊框的顏色和大小，在margin-right屬性中給選框右側(cè)留出一些空白；

3. 在label:before中設(shè)置實(shí)心勾選符號的樣式，將其按中心對齊，并設(shè)置字號；

4. 使用:checked選擇器為選中的復(fù)選框添加樣式，即在勾選框前加上實(shí)心勾。

總體思路是將原生的復(fù)選框設(shè)計(jì)成一個(gè)自己定義的勾選框，利用:before選擇器以及:checked狀態(tài)實(shí)現(xiàn)選擇標(biāo)記。