如何使用javascript和css從選擇框選項中刪除焦點

Question

我想從選擇選項中刪除焦點輪廓，而不是從選擇中刪除。 我怎樣才能做到這一點？ 我為選擇框做了以下操作

select:focus{
  outline:0px
}

我想對選項做同樣的事情。

Answer 1

當父<select>菜單的子<option>被選擇/聚焦時，它將用選擇填充<select>並因此在元素周圍顯示一個焦點環。

<select>是所有<option>子元素的父元素。

您的<select>菜單的顯示方式也由一些因素決定，包括您當前的操作系統/瀏覽器：

例如：所有<option>元素在:hover和:focus上顯示為藍色背景，例如在 Mac 上

所以，你必須的無論是從完全刪除焦點大綱選項<select>元素及其子或更改<select>元素為<ul>與<li>可以隨意風格的元素。

有關更多詳細信息，請參閱此Stack Overflow 帖子。

——

請注意：焦點大綱的目的是讓屏幕閱讀器上的用戶可以訪問您的元素，因此如果您刪除所選元素的任何類型的焦點行為 - 使用鍵盤導航的人將無法分辨選擇了哪個項目。 您可以查看W3C 文檔以獲得最佳實踐。

您可以為具有可訪問性問題的用戶實現兩種不同類型的<select>行為（例如：在檢測到屏幕閱讀器的情況下向元素添加一個類 - 這可能具有挑戰性，因此請查看有關此問題的這篇很棒的Hackernoon 博客文章) 以確保滿足兩種類型的用戶需求。

——