在網(wǎng)頁設(shè)計與開發(fā)中，我們經(jīng)常會使用radio這個標簽用于讓用戶選擇一項選項。而今天我要和大家分享的是如何使用 CSS 來美化它。

<label>
<input type="radio" name="option" value="1"> Option 1
</label>
<label>
<input type="radio" name="option" value="2"> Option 2
</label>

以上是基本radio元素的 HTML 代碼，其中每個選項都被包裹在一個label標簽內(nèi)，以便用戶點擊文字也可以選中選項。接下來我們來看如何使用 CSS 來改變它的樣式。

input[type=radio] {
display: none;
}
label {
cursor: pointer;
}
label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
background-color: #fff;
border: 1px solid #ccc;
}
input[type=radio]:checked ~ label:before {
background-color: #428bca;
}

首先，我們將radio元素設(shè)為不可見，因為我們想使用label元素來作為交互元素。然后，我們?yōu)?strong>label元素設(shè)置了一個手型的鼠標指針，以表明它們是可點擊的。接下來，我們使用:before偽元素來創(chuàng)建一個圓形的選項圓點，并將其樣式設(shè)置為垂直居中、白色背景、灰色邊框。最后，我們使用:checked偽類選擇已選中的選項，并將其自定義背景顏色設(shè)為藍色。

上述代碼在美化radio元素時非常有用，因為它不僅可以讓用戶更清晰地看到自己選擇了哪個選項，而且還可以與頁面的整體設(shè)計風(fēng)格更好地融合。