在CSS中實(shí)現(xiàn)點(diǎn)擊打鉤功能非常簡單。我們可以借助偽類來實(shí)現(xiàn)。下面是具體實(shí)現(xiàn)步驟： 首先，在HTML中，我們需要設(shè)置一個(gè)checkbox。

<input type="checkbox" id="check" />

然后，我們可以使用CSS的偽類來設(shè)置點(diǎn)擊后的樣式。首先，我們設(shè)置未選中時(shí)的樣式：

.unchecked {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
}

接著，我們設(shè)置選中時(shí)的樣式，這里使用偽類:checked來實(shí)現(xiàn)：

#check:checked + .unchecked::after {
content: '';
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #1abc9c;
position: absolute;
top: 2px;
left: 2px;
}

具體解釋一下，我們首先通過#check:checked選擇器來選擇被選中的checkbox，然后再使用+號選擇它后面的.unchecked元素，最后使用::after偽元素來添加打鉤的樣式。打鉤的樣式比較簡單，主要就是一個(gè)圓形，通過background-color來設(shè)置顏色。 最后，我們將未選中的狀態(tài)設(shè)置為unchecked，選中的狀態(tài)設(shè)置為checked：

.unchecked::after {
content: '';
display: none;
}
#check:checked + .unchecked {
background-color: #eaf7f1;
}

代碼就是以上這些，你可以把它們放到一個(gè)樣式表中來使用。這樣，當(dāng)用戶點(diǎn)擊checkbox時(shí)，它的狀態(tài)就會發(fā)生改變，看起來就像是打了鉤。