Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

Day24-:checked 玩轉複選框和單選框的選中效果

發表於 分類於 Disqus：

checked

除了結構偽類外，還有一些可以控制外觀的「UI 偽類」，UI 偽類選擇器專門用於選擇與用戶介面元素狀態相關的元素，如複選框、單選框等。這些選擇器能夠根據元素的狀態進行樣式調整。

本篇將會介紹 :checked ，用於表單中複選框、單選框被選中的樣式。



💠 :checked 基本用法

語法

1
2
3
選擇器:checked {
  屬性名: 屬性值;
}
  • 適用於被選中的 radio 或 checkbox 元素

範例

範例一：選中 radio 單選框

1
2
3
4
5
6
7
8
9
<div class="form-control">
  <input type="radio" id="male" value="male" name="gender" checked>
  <label for="male">male</label>
</div>

<div class="form-control">
  <input type="radio" id="female" value="female" name="gender">
  <label for="female">female</label>
</div>
1
2
3
4
5
input[type="radio"]:checked {
  width: 50px;
  height: 50px;
  background-color: pink;
}

checked



範例二：選中 checkbox 單選框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="form-control">
  <input type="checkbox" id="apple" value="apple" name="fruit" checked>
  <label for="apple">apple</label>
</div>

<div class="form-control">
  <input type="checkbox" id="banana" value="banana" name="fruit">
  <label for="banana">banana</label>
</div>

<div class="form-control">
  <input type="checkbox" id="grape" value="grape" name="fruit">
  <label for="grape">grape</label>
</div>
1
2
3
4
5
input[type="checkbox"]:checked {
  width: 50px;
  height: 50px;
  background-color: pink;
}

checked


但你可能會發現，不管是 radio 或是 checkbox，我們設定了背景色卻沒有變化，這些元素的樣式是由瀏覽器本身進行預設渲染的，瀏覽器通常不允許直接更改它們的內建樣式，不過如果我們只是想改變它的主題顏色，可以使用 accent-color

accent-color

1
2
3
4
5
input:checked {
  width: 50px;
  height: 50px;
  accent-color: pink;
}

See the Pen checked by Lala (@bobee) on CodePen.

當你只需要修改 checkbox 或 radio 的外觀，且不希望過多影響原生的樣式和行為時，accent-color 可以快速解決顏色一致性的問題。

瀏覽器會自動計算與 accent-color 對應的其他顏色，通常會依據無障礙設計標準，以確保對比度與選中狀態下的可讀性，不過有時候的配色可能不會依我們的預期顯示，或是需要更多其他的樣式(如圓角、線框等)，就得自己再客製表單元素的樣式。



💠 實務應用：客製化 checkbox 元素

網站設計經常需要客製化 checkbox 的外觀。我們可以隱藏原生的 checkbox，並用 <label> 製作一個自定義的勾選樣式。

步驟一：先把 checkbox、<label> 放上，這沒什麼問題

1
2
3
4
<div class="checkbox">
  <input type="checkbox" id="agree" value="agree" class="checkbox__input" />
  <label for="agree" class="checkbox__text">我同意以上條款</label>
</div>

步驟二：將 checkbox 隱藏，並用 <label> 做一個仿的 checkbox 樣式，利用 <label> 屬性 for 與 id 的關聯特性，可以直接勾選到真正的 <input type=”checkbox”>

1
2
3
4
5
6
7
8
9
10
11
12
<div class="checkbox">
  <input type="checkbox" id="agree" value="agree" class="checkbox__input" />

  <label for="agree" class="checkbox__label">
    <div class="checkbox__box"></div>
    <div class="checkbox__check">
      <span class="checkbox__icon">✔</span>
    </div>
  </label>

  <label for="agree" class="checkbox__text">我同意以上條款</label>
</div>
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
.checkbox {
  display: flex;
  align-items: center;
}

/* 隱藏 checkbox input */
.checkbox__input {
  display: none;
}

/* Label 文字樣式 */
.checkbox__label {
  cursor: pointer;
  margin-right: 16px;
  position: relative;
  width: 28px;
  height: 28px;
}

/* 自定義的方框 */
.checkbox__box {
  border: 1px solid #4d4d4d;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: white;
  transition: border-color 0.3s;
}

/* 勾選的樣式 */
.checkbox__check {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 1px;
  top: 1px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

checked

步驟三：加上選中時 checked 、hover 樣式，搭配顏色樣式，將勾勾變成白色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.checkbox__check {
	...
  color: white;
	...
}

/* checkbox hover 時的邊框變化 */
.checkbox:hover .checkbox__box {
  border-color: gold;
}

/* 勾選狀態下的樣式 */
.checkbox__input:checked + .checkbox__label .checkbox__check {
  display: flex;
}

.checkbox__input:checked + .checkbox__label .checkbox__box {
  background-color: gold;
  border-color: orange;
}

See the Pen custom-checked by Lala (@bobee) on CodePen.

這樣就完成了一個簡單的客製化 checkbox


完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
<div class="checkbox">
  <input type="checkbox" id="agree" value="agree" class="checkbox__input" />

  <label for="agree" class="checkbox__label">
    <div class="checkbox__box"></div>
    <div class="checkbox__check">
      <span class="checkbox__icon">✔</span>
    </div>
  </label>

  <label for="agree" class="checkbox__text">我同意以上條款</label>
</div>
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
50
51
52
53
54
55
56
.checkbox {
  display: flex;
  align-items: center;
}

/* 隱藏 checkbox input */
.checkbox__input {
  display: none;
}

/* Label 文字樣式 */
.checkbox__label {
  cursor: pointer;
  margin-right: 16px;
  position: relative;
  width: 28px;
  height: 28px;
}

/* 自定義的方框 */
.checkbox__box {
  border: 1px solid #4d4d4d;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: white;
  transition: border-color 0.3s;
}

/* 勾選的樣式 */
.checkbox__check {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 1px;
  top: 1px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checkbox hover 時的邊框變化 */
.checkbox:hover .checkbox__box {
  border-color: gold;
}

/* 勾選狀態下的樣式 */
.checkbox__input:checked + .checkbox__label .checkbox__check {
  display: flex;
}

.checkbox__input:checked + .checkbox__label .checkbox__box {
  background-color: gold;
  border-color: orange;
}

💠 總結

  • :checked 是一個 UI 偽類選擇器，專門處理表單元素的狀態樣式，如單選框或複選框。
  • 瀏覽器對表單元素有預設的樣式控制，但透過 accent-color 可以輕鬆修改其主題色。
  • 如果需要更複雜的樣式客製化，可以結合隱藏原生元素並用 label 自定義外觀。


🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️