為了增強網頁交互性，我們經常需要使用選中狀態，其中包括畫勾的選中狀態。下面是一份CSS代碼，可以快速創建出符合你要求的畫勾選中狀態效果：

.checkbox {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 4px;
position: relative;
}
.checkbox:before {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 2px;
position: absolute;
left: 4px;
top: 4px;
transform: rotate(45deg);
border: 2px solid #fff;
border-top: none;
border-right: none;
opacity: 0;
}
.checkbox:checked:before {
opacity: 1;
}

以上代碼共分為三個部分，下面進行詳細講解。

第一部分：基本樣式

.checkbox {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 4px;
position: relative;
}

以上CSS代碼定義了一個20*20的方框，邊框為1px的灰色，圓角半徑為4px。通過定義position屬性為relative，為接下來的對狀態的定義做好了準備。

第二部分：畫出勾

.checkbox:before {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 2px;
position: absolute;
left: 4px;
top: 4px;
transform: rotate(45deg);
border: 2px solid #fff;
border-top: none;
border-right: none;
opacity: 0;
}

既然要畫出勾，那就當然要在選中狀態的時候才出現，因此這里定義了一個:before偽元素，并將其定位到.position:relative元素內。其中旋轉45度是為了將斜線變成勾的形狀，邊框的顏色需要撐起這個形狀，用border-top和border-right控制來訪改變，同時，opacity屬性為0，可以使其在選中狀態出現時淡入視圖。

第三部分：變為勾的選中狀態

.checkbox:checked:before {
opacity: 1;
}

最后一部分定義了:checked偽類，使偽元素在選中狀態下opacity變為1，由此來實現畫勾的選中狀態的改變。

另外需要強調的是，在實際應用中，我們可以通過如下方式來和HTML代碼進行整合，定義樣式和進行易于維護的歸類管理：

I'm the checkbox

其中標簽可以讓用戶更加方便的實現勾選操作。

以上即是通過CSS實現勾選框的選中狀態的基本介紹了。