在許多網頁應用程序中，我們需要提供一些單選項來供用戶選擇。這些選項通常在一組單選按鈕中展現出來，并且我們還需要用 CSS 來讓用戶選中的那個選項打勾。本文將介紹一種使用 CSS 來實現打勾的單選項按鈕的方法。

首先，我們需要創建一組單選按鈕。這些單選按鈕必須都有相同的 name 屬性，但是不同的 value 屬性。我們還需要用 label 元素來將每個單選按鈕和對應的文本組合在一起。以下是一個例子：

<form>
<input type="radio" name="color" value="red" id="red">
<label for="red">紅色</label>
<br>
<input type="radio" name="color" value="green" id="green">
<label for="green">綠色</label>
<br>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue">藍色</label>
<br>
</form>

接下來，我們需要使用 CSS 來給選中的單選按鈕添加一個打勾樣式。我們可以使用偽類 :checked 來選擇選中的單選按鈕，并用 ::before 偽元素來添加一個打勾。以下是示例 CSS 代碼：

input[type=radio]:checked+label::before {
content: "\2713";
font-size: 16px;
color: red;
margin-right: 5px;
}

在這個代碼片段中，我們使用了 + 選擇器來選擇選中的單選按鈕后面的 label 元素。然后，我們使用 ::before 偽元素來在 label 前面添加一個打勾。在 content 屬性中，我們使用了 Unicode 字符 \2713 來顯示打勾符號。接下來的幾行代碼用來設置打勾的顏色、大小和位置。

這樣，我們就成功地創建了一個打勾的單選項按鈕，并使用 CSS 來添加選中狀態的打勾樣式。