使用CSS自訂checkbox方法

2018-04-26 418 words 2 minutes

Contents

平常在用 checkout 都用在分支，今天查看 checkbox 的 CSS 自訂方式。瀏覽器對 <input type="checkbox"> 的預設樣式各不相同，在 Windows、macOS、Android 上的外觀都有差異，若要讓網站在各平台顯示一致，需要自訂 checkbox 樣式。

為什麼要自訂 Checkbox？

不同瀏覽器和作業系統對 checkbox 的預設外觀差異很大：

Windows：方形、系統顏色
macOS：圓角方形、系統藍色
Android：可能是圓形

自訂 checkbox 可以讓所有平台的外觀一致，並符合網站的品牌設計。

方法一：CSS 隱藏 + `::before` 偽元素（傳統方式）

利用 CSS Hack 技巧，隱藏原生 checkbox 後用偽元素模擬：

1
2
3
4
5


<label class="custom-checkbox">
  <input type="checkbox" id="agree">
  <span class="checkmark"></span>
  同意條款
</label>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

/* 隱藏原生 checkbox，但保留在 DOM 中（讓螢幕閱讀器能讀取） */
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自訂外觀 */
.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s;
}

/* 勾選狀態：使用相鄰選擇器 + :checked 偽類 */
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #4a90e2;
  border-color: #4a90e2;
}

/* 勾選標記（打勾符號） */
.custom-checkbox input[type="checkbox"]:checked + .checkmark::before {
  content: '';
  width: 6px;
  height: 10px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-2px);
}

/* focus 狀態（鍵盤導航時顯示焦點框） */
.custom-checkbox input[type="checkbox"]:focus + .checkmark {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

這個方法透過 CSS 的 :checked 偽類加上相鄰選擇器（+），在 checkbox 狀態改變時切換 .checkmark 的樣式。

方法二：`accent-color`（現代簡單方式）

CSS accent-color 是一個現代屬性，可以直接改變 checkbox（以及 radio、range、progress）的主題色，不需要複雜的 CSS Hack：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 全域設定 */
:root {
  accent-color: #4a90e2;
}

/* 或只針對特定 checkbox */
input[type="checkbox"] {
  accent-color: #4a90e2;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

優點：簡單、瀏覽器負責渲染外觀
缺點：客製化程度有限，只能改顏色，無法自訂形狀

瀏覽器支援：Chrome 93+、Firefox 92+、Safari 15.4+，現代瀏覽器都支援。

CSS Checkbox Hack（純 CSS 互動效果）

Checkbox Hack 是利用 :checked 偽類和 CSS 選擇器來實現純 CSS 的互動效果，不需要 JavaScript：

1
2
3
4
5


<input type="checkbox" id="toggle">
<label for="toggle">點我開關</label>
<div class="content">
  這個區塊會在 checkbox 勾選後顯示
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


/* 隱藏 checkbox */
#toggle {
  display: none;
}

/* 預設隱藏 content */
.content {
  display: none;
}

/* checkbox 勾選後，顯示 content（~ 是一般兄弟選擇器） */
#toggle:checked ~ .content {
  display: block;
}

/* 對應 label 的樣式變化 */
#toggle:checked + label {
  color: #4a90e2;
}

無障礙（Accessibility）注意事項

自訂 checkbox 時需要注意不影響無障礙功能：

不要用 display: none 或 visibility: hidden 隱藏原生 checkbox（螢幕閱讀器無法讀取）
- 應使用 opacity: 0 搭配 position: absolute 讓元素視覺上不可見但仍在 DOM 中
確保 <label> 正確關聯 <input>
- 使用 <label for="id"> 或將 <input> 包在 <label> 內部
保留 :focus 狀態的視覺提示，讓鍵盤使用者能看到目前焦點在哪裡
確保對比度足夠，勾選後的顏色需符合 WCAG AA 標準（對比度 4.5:1 以上）