Elementor 表格 checkbox 改色怎麼做？CSS 實作與排錯重點

在使用 Elementor Pro 製作聯絡表單時，核取方塊（Checkbox）的顏色預設無法更改。這些方塊會跟隨使用者的瀏覽器設定或是佈景主題的基礎顏色，如果你想要將它改為品牌專屬色，在 Elementor 的視覺化介面中其實是找不到對應選項的。

為什麼 Checkbox 改色這麼麻煩？

傳統上，HTML 的 <input type="checkbox"> 是由作業系統和瀏覽器渲染的，樣式非常難以客製化。早期我們必須先用 appearance: none 隱藏原生樣式，再用 ::before 和 ::after 等虛擬元素從零畫出一個方塊，這樣做雖然漂亮，但程式碼冗長且容易跑版。

實作步驟：使用 CSS 快速改色

你可以將以下程式碼放入 Elementor 表單小工具的「進階」→「自訂 CSS」分頁中，或是全站的 CSS 設定裡。

/* 修改 Elementor 表單內所有 Checkbox 的勾選顏色 */
selector input[type="checkbox"] {
    accent-color: #d93025; /* 替換成你的品牌色 */
}

/* 稍微加大方塊尺寸，讓使用者更好點擊 */
selector .elementor-field-option input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    cursor: pointer;
}

/* 當滑鼠懸停時的效果 */
selector .elementor-field-option label:hover {
    color: #d93025;
    transition: 0.3s;
}

步驟拆解與說明

• accent-color：這是目前最主流且輕量的改色方式，它會自動處理勾選圖示（勾勾）與背景色的對比，確保易讀性。
• selector：在 Elementor 的自訂 CSS 中，這代表該小工具本身，能有效限縮 CSS 的作用範圍，避免污染全站樣式。
• 尺寸調整：原生的 Checkbox 在高解析度螢幕上有時顯得太小，透過設定寬高（em 單位）可以讓它更符合現代網頁的比例。

踩坑提醒與實務建議

雖然 accent-color 很好用，但在實務上仍需留意以下細節，避免上線後發現樣式不如預期：

• 優先權（Specificity）問題：如果你的顏色沒生效，請檢查是否有佈景主題使用了更強的選取器（例如使用了 ID）。此時可以在屬性後加上 !important 測試。
• 舊版瀏覽器相容性：極少數的舊版 IE 或過舊的 Safari 不支援此屬性，它們會自動退回預設外觀，不會導致版面破裂，這是一種「漸進增強」的設計策略。
• 顏色對比度：當你設定 accent-color 為淺色時，瀏覽器可能會自動把勾勾符號變成黑色；若設為深色，勾勾則會是白色，這是瀏覽器的內建智慧，建議設定後在不同裝置上檢查一下。
• 單選按鈕（Radio Button）：此屬性同樣適用於 input[type="radio"]，你可以一併加入選取器中同步改色。

實作懶人包，照作就能用

操作步驟

1. 安裝並啟用 FluentSnippets 外掛
2. 新增一個 CSS 片段，並在內容處貼入以下程式碼：

   .custom-checkbox-style input[type="checkbox"] {
       accent-color: #d93025;
   }
   .custom-checkbox-style .elementor-field-option input[type="checkbox"] {
       width: 1.2em;
       height: 1.2em;
       vertical-align: middle;
       cursor: pointer;
   }
   .custom-checkbox-style .elementor-field-option label:hover {
       color: #d93025;
       transition: 0.3s;
   }

3. 到 Elementor 編輯該表單小工具 > 進階 > CSS Classes 欄位填入：custom-checkbox-style
4. 點擊啟用片段並儲存
5. 清除網站快取，回到前台確認效果