如何使用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 博客文章) 以确保满足两种类型的用户需求。

——