CSS中的單選按鈕（Radio Button）通常會(huì)默認(rèn)顯示一個(gè)圓圈。但是有些時(shí)候，我們并不需要這個(gè)圓圈。那么怎么去掉這個(gè)圓圈呢？

input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
}
input[type="radio"]:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
border: 1px solid #ccc;
margin-right: 5px;
vertical-align: middle;
}
input[type="radio"]:checked:before {
background-color: #007bff;
border-color: #007bff;
}

以上代碼就是修改單選按鈕樣式所需要的CSS代碼，其中：

• -webkit-appearance、-moz-appearance和appearance屬性用于去掉默認(rèn)外觀
• outline: none去掉焦點(diǎn)時(shí)的邊框
• border: none默認(rèn)的邊框也要去掉，不然圓圈還是會(huì)顯示出來(lái)
• input[type="radio"]:before用偽類（:before）來(lái)創(chuàng)建一個(gè)偽元素，設(shè)置成圓圈的樣式
• input[type="radio"]:checked:before設(shè)置選中狀態(tài)的顏色樣式

如果以上代碼放在頁(yè)面中，會(huì)發(fā)現(xiàn)原本的圓圈已經(jīng)不再出現(xiàn)，而是被我們?cè)O(shè)置的樣式所替代了。