除了結構偽類外,還有一些可以控制外觀的「UI 偽類」,UI 偽類選擇器專門用於選擇與用戶介面元素狀態相關的元素,如複選框、單選框等。這些選擇器能夠根據元素的狀態進行樣式調整。
本篇將會介紹 :checked
,用於表單中複選框、單選框被選中的樣式。
:checked
基本用法選擇器:checked {
屬性名: 屬性值;
}
radio
或 checkbox
元素一起試試:[CODEPEN]
radio
單選框<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>
input[type="radio"]:checked {
width: 50px;
height: 50px;
background-color: pink;
}
checkbox
單選框<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>
input[type="checkbox"]:checked {
width: 50px;
height: 50px;
background-color: pink;
}
但你可能會發現,不管是 radio
或是 checkbox
,我們設定了背景色卻沒有變化,這些元素的樣式是由瀏覽器本身進行預設渲染的,瀏覽器通常不允許直接更改它們的內建樣式,不過如果我們只是想改變它的主題顏色,可以使用 accent-color
input:checked {
width: 50px;
height: 50px;
accent-color: pink;
}
當你只需要修改 checkbox
或 radio
的外觀,且不希望過多影響原生的樣式和行為時,accent-color
可以快速解決顏色一致性的問題。
瀏覽器會自動計算與 accent-color
對應的其他顏色,通常會依據無障礙設計標準,以確保對比度與選中狀態下的可讀性,不過有時候的配色可能不會依我們的預期顯示,或是需要更多其他的樣式(如圓角、線框等),就得自己再客製表單元素的樣式。
checkbox
元素一起試試:[CODEPEN]
網站設計經常需要客製化 checkbox
的外觀。我們可以隱藏原生的 checkbox
,並用 <label>
製作一個自定義的勾選樣式。
步驟一:先把 checkbox
、<label>
放上,這沒什麼問題
<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”>
<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>
.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
、hover
樣式,搭配顏色樣式,將勾勾變成白色
.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;
}
這樣就完成了一個簡單的客製化 checkbox
完整程式碼
<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>
.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
自定義外觀。本文將同步更新至 Lala Code