在 chrome 83 中悬停时如何从选项中删除黑色边框

Question

我将我的 chrome 浏览器更新为83并看到option tag它看起来很难看，它在选项中悬停时显示黑色边框。

我试过

option {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option:hover {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option:hover {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option {
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
}

option:hover {
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
}

但仍然没有运气！！为什么？我不知道。

我想删除那个黑色边框，因为在我的项目中它看起来很难看。

我的需要

我需要与之前的 select 和 option 标签相同的结果。

Answer 1

我找到了这个线程

可悲的是，没有错误或类似的东西。这是一个新功能

我希望他们会在 chrome 的下一个版本中改变他们的实现。

:focus-visible、:focus 和 :hoveroption在这个 chrome 版本中不起作用

Answer 2

在 Chrome 84 中，悬停时似乎没有出现选择选项周围的黑色边框。现在更改 css 轮廓规则是删除可聚焦输入的黑色边框的最简单方法。

*:focus {
  outline: none;
}

Answer 3

这是一个实验性功能。您可以尝试禁用此标志：chrome://flags/#form-controls-refresh 显然 83+ 版本的 chrome 改变了表单的呈现/处理方式。

Answer 4

＃问题方案：

转到以下链接或复制粘贴 chrome url 选项卡并点击进入。

铬：//标志/#form-controls-refresh

和禁用Web 平台控件更新的 UI