时间戳

首页 > 解决方案 > 如何使用 javascript 和 css 从选择框选项中删除焦点

javascript - 如何使用 javascript 和 css 从选择框选项中删除焦点

问题描述

我想从选择选项中删除焦点轮廓，但不是从选择中删除。我怎样才能做到这一点？我为选择框做了以下操作

select:focus{
  outline:0px
}

我想对选项做同样的事情。

标签： javascriptcss

解决方案

当<option>父<select>菜单的子菜单被选择/聚焦时，它将填充<select>选择并因此在元素周围显示一个焦点环。

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

您的<select>菜单的显示方式也取决于一些因素，包括您当前的操作系统/浏览器：

例如： 所有元素在 Mac上<option>显示为蓝色背景:hover:focus

因此，您可以选择完全从<select>元素及其子元素中删除焦点轮廓，或者将元素更改<select>为可以随意设置样式的元素<ul>。<li>

有关更多详细信息，请参阅此Stack Overflow 帖子。

--

请注意：焦点大纲的目的是让屏幕阅读器上的用户可以访问您的元素，因此如果您删除所选元素的任何类型的焦点行为 - 使用键盘导航的人将无法判断选择了哪个项目。您可以查看W3C 文档以了解最佳实践。

您可以为有可访问性问题的用户实现两种不同类型的<select>行为（例如：在检测到屏幕阅读器的情况下向元素添加一个类 - 这可能具有挑战性，因此请查看这篇很棒的Hackernoon 博客文章）确保两种类型的用户的需求都得到照顾。

--

推荐阅读