CSS 設置 Radio 顏色

在 HTML 表單中，Radio 按鈕是一種可供用戶選擇的單選輸入框。它們通常是一種很重要的功能，因為它們允許用戶在多個選項之間進行選擇。

為了使這些 Radio 按鈕更好看，我們可以使用 CSS 樣式對它們的顏色進行設置。下面是一個例子：

input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 20px;
height: 20px;
outline: none;
border: 2px solid #444;
transition-duration: 0.4s;
cursor: pointer;
}
input[type="radio"]:checked {
background-color: #444;
border-color: #444;
transition-duration: 0.4s;
}

這段 CSS 代碼首先通過設置appearance屬性來刪除 Radio 原本的樣式。然后，我們使用border-radius屬性來將 Radio 按鈕變成圓形，并且使用width和height屬性來控制其大小。

接下來，我們使用border屬性來設置 Radio 邊框的樣式，以及使用outline屬性來移除 Radio 選中時的默認邊框樣式。

最后，我們使用background-color和border-color屬性來設置選中時的背景和邊框顏色。我們還使用transition-duration屬性來設置過渡效果，使 Radio 按鈕變得更加平滑。

通過這樣的 CSS 樣式，我們可以自由地控制 Radio 按鈕的顏色，從而使其更加美觀和易于使用。希望這篇文章對你有所幫助！