Elementor自訂Radio樣式！純CSS美化單選鈕教學

原生網頁的單選鈕總是長得太醜，壞了整個電商官網的質感。這篇教你直接用純 CSS 徹底解鎖 Elementor Form 的樣式限制，一分鐘讓網站表單擁有高級品牌的視覺一致性。

極致細節效果預覽

• 全面隱藏：拔除瀏覽器原生醜陋的 Radio 樣式。
• 完美內圈：選項被點擊選中時，自動展現深色精緻內圈。
• 絲滑動態：滑鼠 Hover 懸停時，邊框即時變色回饋。
• 防呆防護：鍵盤 Focus 選取時，外圍散發柔和光暈。

一秒部署使用方式

打開你的 Elementor Form Widget，點進進階設定，直接在「CSS Classes」欄位加上這串指定名稱：

yao-radio

完整 CSS 原始碼

1. 廢除預設外觀

.yao-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #C3C4BF;
    border-radius: 50%;
    background: white;
    cuyaoor: pointer;
    position: relative;
    vertical-align: middle;
    margin: 0;
    flex-shrink: 0;
}

使用 appearance: none 是技術核心。這行可以強制扒掉瀏覽器的預設外衣，讓我們用純 CSS 從零蓋出想要的大小與底色。

2. 精準觸發選中狀態

/* 外圈邊框變色 */
.yao-radio input[type="radio"]:checked {
    border-color: #011A4C;
}

/* 實心內圈填滿 */
.yao-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background: #011A4C;
    border-radius: 50%;
}

當欄位處於 :checked 狀態，外圈邊框會瞬間切換品牌色。同時利用 ::after 偽元素結合絕對定位，在正中央畫出高級感的實心小圓點。

3. 動態 Hover 與 Focus 回饋

/* 懸停觸發 */
.yao-radio input[type="radio"]:hover:not(:checked) {
    border-color: #011A4C;
}

/* 鍵盤聚焦 */
.yao-radio input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 26, 76, 0.15);
}

特別加入 :not(:checked) 進行條件篩選。這能確保已經被選中的按鈕不會重複觸發 Hover 動態，Focus 狀態下的陰影則能大幅拉高網頁無障礙體驗。

高效管理：CSS 變數封裝版

如果你的網站專案很大，未來會頻繁微調尺寸或主題顏色，請直接部署這個進階變數版本：

.yao-radio {
    --yao-radio-size: 24px;
    --yao-radio-inner-size: 15px;
    --yao-radio-color: #011A4C;
    --yao-radio-border-unchecked: #C3C4BF;
    --yao-radio-bg: white;
}

將寬度與顏色全面封裝成全域變數。以後只要修改最頂層的數值，底下所有單選按鈕的尺寸與色彩結構就會同步校正，完全不需要耗時逐行改寫。

WordPress 網站實戰安裝步驟

1. 登入 WordPress 後台，直接點擊進入 外觀 → 自訂 → 額外的 CSS。
2. 將上面整理好的完整 CSS 程式碼一字不漏地貼入文字框中，點擊發布。
3. 點開 Elementor 表單編輯器，在對應的單選鈕欄位填入樣式名稱 yao-radio 即可完美收工。

網頁美化常見問題 QA

這個 CSS 樣式會影響到表單的複選框（Checkbox）嗎？

不會。此程式碼在選擇器中明確指定了 input[type=”radio”]，因此只會精準套用於單選鈕，不會干擾網站上的複選框或其他表單元件。

為什麼我貼上 CSS 之後，Elementor 表單沒有發生變化？

請務必檢查您是否漏掉了 CSS Classes 的設定。您必須在 Elementor 表單編輯器的「CSS Classes」欄位中填入 yao-radio，程式碼才能正確與表單進行樣式連結。

我可以直接在 Elementor 的 HTML 欄位裡貼上這段樣式嗎？

可以。您可以直接在表單上方新增一個 HTML 編輯器元件，並將程式碼用 script 或 style 標籤包裹後貼入，即可立刻生效。

實戰懶人包 一鍵複製馬上套用

.yao-radio {
    --yao-radio-size: 24px;
    --yao-radio-inner-size: 15px;
    --yao-radio-color: #011A4C;
    --yao-radio-border-unchecked: #C3C4BF;
    --yao-radio-bg: white;
}

.yao-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: var(--yao-radio-size);
    height: var(--yao-radio-size);
    border: 2px solid var(--yao-radio-border-unchecked);
    border-radius: 50%;
    background: var(--yao-radio-bg);
    cuyaoor: pointer;
    position: relative;
    vertical-align: middle;
    margin: 0;
    flex-shrink: 0;
}

.yao-radio input[type="radio"]:checked {
    border-color: var(--yao-radio-color);
}

.yao-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--yao-radio-inner-size);
    height: var(--yao-radio-inner-size);
    background: var(--yao-radio-color);
    border-radius: 50%;
}

.yao-radio input[type="radio"]:hover:not(:checked) {
    border-color: var(--yao-radio-color);
}

.yao-radio input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 26, 76, 0.15);
}