每個(gè)前端開發(fā)者都曾或?qū)⒚媾R這樣的場景：你的老闆、客戶或設(shè)計(jì)師認(rèn)為瀏覽器在焦點(diǎn)元素上應(yīng)用的輪廓與UI不匹配，並要求你將其移除?；蛘吣闵踔量赡茏约阂蚕胍瞥?。

因此，你進(jìn)行了一些研究，發(fā)現(xiàn)這是強(qiáng)烈不建議的，因?yàn)榻裹c(diǎn)輪廓的存在是有原因的：它為鍵盤導(dǎo)航（使用Tab鍵）提供視覺反饋，讓無法使用鼠標(biāo)或有視覺障礙的用戶知道他們?cè)谄聊簧系奈恢谩?/p>

但這並不意味著你必須保留這個(gè)輪廓。與其移除它，不如用其他東西替換它。這樣，你就可以保持界面的可訪問性，並且獲得更多關(guān)於外觀的靈活性，以便更好地匹配你的UI。

你可以首先通過選擇元素的焦點(diǎn)狀態(tài)並應(yīng)用outline: none來移除默認(rèn)的瀏覽器輪廓。然後，你可以從以下選項(xiàng)中選擇一個(gè)來替換它：

更改背景顏色

這最適合可以填充的元素，例如按鈕。選擇元素的焦點(diǎn)狀態(tài)並為其應(yīng)用對(duì)比鮮明的背景顏色。對(duì)比度越高越好，因?yàn)榧?xì)微的變化可能不足以成為強(qiáng)烈的視覺提示，尤其是在色盲和低視力的情況下。

在下面的示例中，背景色和邊框顏色都會(huì)改變；你可以選擇其中一個(gè)或兩個(gè)。

點(diǎn)擊或使用Tab鍵聚焦以查看此狀態(tài)的外觀。

更改文本顏色

如果元素有任何文本，你可以選擇焦點(diǎn)狀態(tài)並更改其顏色。這對(duì)於使用mask-image應(yīng)用的圖標(biāo)也有效；你可以選擇作為焦點(diǎn)元素後代的圖標(biāo)並更改其背景顏色，就像下面的示例按鈕一樣。

同樣，對(duì)比度是關(guān)鍵。你還可以考慮在文本鏈接上使用下劃線，並將其作為更改狀態(tài)的一部分，因?yàn)檎鏦eb內(nèi)容無障礙指南所述：

顏色不用作傳達(dá)信息、指示操作、提示響應(yīng)或區(qū)分視覺元素的唯一視覺手段。 （A級(jí)）了解成功標(biāo)準(zhǔn)1.4.1

應(yīng)用盒陰影

box-shadow屬性可以完成與輪廓完全相同的工作，但它功能更強(qiáng)大——你現(xiàn)在可以控制它的顏色、不透明度、偏移量、模糊半徑和擴(kuò)展半徑。如果指定了border-radius ，則盒陰影也遵循相同的圓角。

你可以用這種技術(shù)變得非常有創(chuàng)意（但說真的，不要這樣做）：

這幾乎適用於任何類型的可聚焦元素，例如切換按鈕、複選框、單選按鈕和滑塊。

增大元素尺寸

作為顏色更改的替代方案，你也可以採用細(xì)微的尺寸修改作為焦點(diǎn)反饋。在這個(gè)例子中，我們使用transform: scale 。

這裡的關(guān)鍵是微妙。極端的尺寸變化可能會(huì)導(dǎo)致內(nèi)容重排，更不用說對(duì)於那些喜歡減少運(yùn)動(dòng)的人來說是一種糟糕的體驗(yàn)了。

複製現(xiàn)有的懸停樣式

如果元素已經(jīng)具有對(duì)比鮮明的懸停樣式，你可以簡單地採用該樣式並將其也應(yīng)用於焦點(diǎn)狀態(tài)。這是一個(gè)相當(dāng)優(yōu)雅的解決方案，因?yàn)槟銦o需向界面添加任何新的顏色或輪廓。

這是一個(gè)示例，其中焦點(diǎn)狀態(tài)和懸停狀態(tài)都採用了與元素默認(rèn)樣式的背景形成高對(duì)比度的樣式：

附加：自定義默認(rèn)輪廓

到目前為止，我們所看到的一切都假設(shè)我們想要完全移除焦點(diǎn)輪廓。我們不必這樣做！事實(shí)上，它是一個(gè)我們可以自定義的邊框。

 button:focus {
  outline: 3px dashed orange;
}

如果我們想微調(diào)樣式，這可以用這種方式編寫：

 button:focus {
  outline-width: 3px;
  outline-style: dashed;
  outline-color: orange;
}

我們擁有的另一個(gè)超能力是outline-offset屬性，它與outline速記屬性分開，但可以與之一起使用來更改焦點(diǎn)環(huán)的位置：

 button:focus {
  outline: 3px dashed orange;
  outline-offset: 10px;
}

結(jié)論

你可以混合和匹配所有這些選項(xiàng)，以獲得適合界面中每個(gè)組件類型的自定義樣式。

值得重申的是：在採用自定義焦點(diǎn)狀態(tài)時(shí)，不要忘記除了顏色之外還要使用鮮明的顏色對(duì)比度和其他視覺提示。當(dāng)然，我們都希望獲得與我們的設(shè)計(jì)相符的體驗(yàn)，但我們可以在此過程中遵守良好的可訪問性實(shí)踐。 W3C 建議使用此工具來測試顏色值相對(duì)於WCAG 指南的對(duì)比度。

以上是與自定義聚焦樣式有點(diǎn)樂趣的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！