CSS是一種樣式表語言，它可以美化網站并控制網站的布局。其中一種非常常用的優化就是打勾多選框的樣式。下面介紹一下如何使用CSS來實現打勾多選框的樣式。

input[type="checkbox"] {
display: none;
}
.checkbox-label {
border: 1px solid #999;
padding: 5px;
display: inline-block;
position: relative;
user-select: none;
}
.checkbox-label:after {
content: "\2714";
font-size: 14px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 0.2s ease-in-out;
}
input[type="checkbox"]:checked + .checkbox-label {
background-color: #7395AE;
}
input[type="checkbox"]:checked + .checkbox-label:after {
transform: translate(-50%, -50%) scale(1);
}

首先，我們將多選框的樣式設為display:none;，這樣它就不會顯示在頁面上。接著，我們為包裹多選框的元素設置一些基本樣式，以及設置position:relative;，為了讓:after偽元素相對于父元素進行定位。

之后，我們通過:after偽元素展示打勾標志。我們將其內容設置為 Unicode 編碼，\2714是鉤形字體的 Unicode 編碼。然后，我們將其定位為絕對位置，居中于元素上，同時使其縮放到0，通過 CSS 過渡效果實現過渡。

最后，我們設置input[type="checkbox"]:checked選擇器，這意味著多選框被選中時應用的樣式。我們為.checkbox-label設置一個新的背景色，于此同時，將:after偽元素的縮放比例調整為1，以展示打勾標志。