|
|
|
|
|
今天介紹一個(gè)漂亮的復(fù)選框(checkbox)樣式,它是使用SVG實(shí)現(xiàn)的。
HTML
<label class="c-custom-checkbox">
<input type="checkbox" checked />
<svg width="32" height="32" viewBox="-4 -4 39 39" aria-hidden="true" focusable="false">
<!-- The background -->
<rect class="checkbox__background" width="35" height="35" x="-2" y="-2" stroke="currentColor" fill="none" stroke-width="3"
rx="6" ry="6"></rect>
<!-- The checkmark-->
<polyline class="checkbox__checkmark" points="4,14 12,23 28,5" stroke="transparent" stroke-width="4" fill="none"></polyline>
</svg>
<span>復(fù)選框 - 測(cè)試演示</span>
</label>
代碼分析
從HTML代碼看到,復(fù)選框的樣式使用了SVG來(lái)設(shè)計(jì)。
使用 SVG 創(chuàng)建自定義復(fù)選框具有靈活、且易于訪問(wèn)的優(yōu)點(diǎn)。
使用 SVG,我們不為復(fù)選框本身設(shè)置樣式——我們隱藏復(fù)選框并使用 SVG 來(lái)創(chuàng)建復(fù)選框圖像。所以 SVG 只是復(fù)選框的視覺(jué)替換。
因此,為了使用 SVG 樣式化復(fù)選框,我們需要將 SVG 添加到標(biāo)記中的某處。當(dāng)然,你可以將 SVG 用作背景圖像(在復(fù)選框上label)。
SVG的樣式設(shè)計(jì)如下面的CSS代碼。
CSS
.c-custom-checkbox {
cursor: pointer;
display: flex;
align-items: flex-start;
--checked-state-bg-color: hsl(350, 95%, 58%);
--checked-state-check-color: #fff;
--outline-color: var(--checked-state-bg-color);
--outline-offset: 2px;
}
.c-custom-checkbox input[type=checkbox] {
/* 從頁(yè)面流中刪除復(fù)選框,將其放置在SVG的頂部 */
position: absolute;
/* set same dimensions as the SVG */
width: 1em;
height: 1em;
/* 隱藏它 */
opacity: 0.00001;
}
.c-custom-checkbox svg {
/* 設(shè)置SVG維度,例如相對(duì)于字體大小,使其與字體大小成比例 */
width: 1em;
height: 1em;
margin-right: 0.5em;
margin-top: 0.1em;
/* 將轉(zhuǎn)換應(yīng)用于svg中的元素 */
}
.c-custom-checkbox svg * {
transition: all 0.1s linear;
}
.c-custom-checkbox input[type=checkbox]:checked + svg .checkbox__background {
fill: var(--checked-state-bg-color);
stroke: var(--checked-state-bg-color);
}
.c-custom-checkbox input[type=checkbox]:checked + svg .checkbox__checkmark {
stroke: var(--checked-state-check-color);
}
.c-custom-checkbox input[type=checkbox]:focus + svg {
outline: 3px solid var(--outline-color);
outline-offset: var(--outline-offset);
}
.c-custom-checkbox input[type=checkbox]:focus:not(:focus-visible) + svg {
outline: none;
}
代碼分析
.c-custom-checkbox {
/* 為標(biāo)簽中的復(fù)選框創(chuàng)建定位上下文*/
position: relative;
/* 這里為其他 label 樣式 */
}
.c-custom-checkbox input[type="checkbox"] {
/* 從流中刪除復(fù)選框 */
position: absolute;
/* 視覺(jué)上隱藏它 */
opacity: 0;
/* 根據(jù)需要調(diào)整大小和位置 */
width: 1em;
height: 1em;
/* 將其放置在SVG頂部的標(biāo)簽內(nèi) */
top: ...;
left: ...;
/* 有時(shí)候你需要添加 z-index */
z-index: ...;
}
所以復(fù)選框在技術(shù)上仍然在它應(yīng)該在的地方,它仍然是交互式的,它是完全可訪問(wèn)的,但它在視覺(jué)上是隱藏的,所以它可以被一個(gè)更有風(fēng)格的替代品取代:SVG。
由于我們隱藏了原始復(fù)選框,因此我們需要在視覺(jué)上替換選中和未選中狀態(tài)以及焦點(diǎn)樣式。
SVG 放置在 DOM 中的復(fù)選框之后,因此我們可以使用相鄰的兄弟選擇器選擇它,并根據(jù)復(fù)選框的狀態(tài)設(shè)置樣式。因此,當(dāng)復(fù)選框獲得焦點(diǎn)時(shí),我們?cè)?SVG 上顯示焦點(diǎn)輪廓:
/* 當(dāng)SVG接收焦點(diǎn)時(shí),直觀地顯示焦點(diǎn)輪廓 */
.c-custom-checkbox input[type="checkbox"]:focus + svg {
outline: 3px solid #E55360;
outline-offset: 2px;
}
/* 隱藏鼠標(biāo)用戶的焦點(diǎn)樣式 */
.c-custom-checkbox input[type="checkbox"]:focus:not(:focus-visible) + svg {
outline: none;
}
焦點(diǎn)樣式可以是你想要的任何樣式,只要它非常清晰且視覺(jué)上易于訪問(wèn)即可。同樣,你可以使用選擇器添加禁用狀態(tài)樣式:disabled
。
為了模擬選中/取消選中 SVG 中的復(fù)選框,我們顯示/隱藏其中的復(fù)選標(biāo)記,并更改背景顏色:
/*svg 基礎(chǔ)樣式 */
.c-custom-checkbox svg {
/* 設(shè)置SVG維度,例如相對(duì)于字體大小,使其與標(biāo)簽中文本的大小成比例 */
width: 1em;
height: 1em;
/* ... */
/* 將轉(zhuǎn)換應(yīng)用于svg中的元素 */
* {
transition: all 0.1s linear;
}
}
/* 選中復(fù)選框時(shí),更改svg內(nèi)部的樣式 */
.c-custom-checkbox input[type="checkbox"]:checked + svg {
.checkbox__bg {
fill: var(--checked-state-bg-color);
stroke: var(--checked-state-bg-color);
}
.checkbox__checkmark {
stroke: var(--checked-state-checkmark-color);
}
}
你可以更進(jìn)一步并針對(duì) Windows 高對(duì)比度模式優(yōu)化它:
.c-custom-checkbox svg {
@media screen and (-ms-high-contrast: active) {
.checkbox__bg {
stroke: windowText;
}
}
}
@media screen and (-ms-high-contrast: active) {
.c-custom-checkbox input[type="checkbox"]:checked + svg {
.checkbox__bg {
fill: windowText;
}
.checkbox__checkmark {
stroke: highlight;
}
}
}
總結(jié)
使用內(nèi)聯(lián) SVG 的眾多好處之一是我們擁有真實(shí)的元素(復(fù)選標(biāo)記和正方形)以及我們可以靈活設(shè)置樣式的真實(shí)邊界(筆畫(huà)),因此我們不依賴背景圖像和顏色來(lái)創(chuàng)建和傳達(dá)狀態(tài),因?yàn)楸尘皥D像、顏色和陰影等效果通常在用戶控制的環(huán)境中被覆蓋。
相關(guān)文章