要為radio元素設置顏色，可以使用CSS的偽元素:after或:before。在此之前先在HTML中定義radio元素。

<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>

現在我們可以為radio元素設置顏色了。以下是一個示例：

input[type="radio"] {
visibility: hidden;
}
label:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
background-color: #ddd;
border-radius: 50%;
}
input[type="radio"]:checked+label:before {
content: "\f00c";
font-family: "FontAwesome";
font-size: 14px;
color: #fff;
background-color: #0072c6;
text-align: center;
line-height: 15px;
}
input[type="radio"]:focus+label:before {
outline: 1px dotted #ddd;
}

該CSS樣式隱藏了radio元素，然后使用:before偽元素創建一個圓形div代替radio元素。當radio元素被選中時，通過:checked偽類將div的內容更改為一個Unicode字符“\f00c”，該字符來自于FontAwesome字體圖標庫，該庫包含了數百個圖標。通過設置字體大小、顏色和圓角來使div看起來像一個實心圓形。

通過:focus偽類定義了選中radio元素時，圓形div周圍的虛線框。使用這個樣式，可以讓用戶知道哪個radio被選中，并允許他們使用鍵盤或其他輸入設備選擇不同的選項。