對號是我們在做表單或是復(fù)選框設(shè)計(jì)中常用的一個(gè)符號，那么要怎么使用CSS來實(shí)現(xiàn)這個(gè)對號呢？

/* 首先給復(fù)選框選中狀態(tài)下的對號打上樣式 */
input[type="checkbox"]:checked:before {
content: "\2714";
color: green;
font-size: 18px;
}

上面的代碼中使用了偽元素:before來添加對號的內(nèi)容，內(nèi)容為ASCII碼為2714的字符，此外也可以使用Unicode編碼，它們都可以渲染成對號。同時(shí)也設(shè)置了對號的顏色和字體大小。

/* 接著給復(fù)選框未選中狀態(tài)下的對號打上樣式 */
input[type="checkbox"]:not(:checked):before {
content: "";
}

上面的代碼中使用了:not(:checked)偽類來匹配復(fù)選框未選中狀態(tài)下的對號，并將內(nèi)容置為無。這樣就能實(shí)現(xiàn)未選中狀態(tài)下無對號的效果。

通過上面的代碼，我們使用CSS就可以非常簡單地實(shí)現(xiàn)復(fù)選框?qū)μ柕娘@示和隱藏了。