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

【问题标题】：How to remove black border from option when hover in chrome 83在 chrome 83 中悬停时如何从选项中删除黑色边框
【发布时间】：2020-09-10 06:16:08
【问题描述】：

我将我的 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;
}

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

但还是没有运气！！为什么？我不知道。

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

我的需要

我需要与之前的选择和选项标签相同的结果。

【问题讨论】：

当您选择任何选项标签时，select tag 会显示奇怪的黑色边框并更改其border-radius
这个黑色边框现在在 chrome 中无处不在。不仅在选项中。我也在寻找摆脱它的方法。至少对我自己来说。你试过stackoverflow.com/questions/3397113/… 吗？
是的，我尝试了所有方法，但仍然无法正常工作
出于可访问性原因更新了焦点轮廓样式：blog.chromium.org/2020/03/…
不仅丑陋，而且甚至无法实现 - 如果您快速悬停并取消悬停选项并开始滚动页面，则选项不会关闭 :) 我无法相信这最终会投入生产。

标签： javascript html css google-chrome

【解决方案1】：

我找到了这个thread

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

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

:focus-visible、:focus 和 :hover 不适用于此 chrome 版本中的 option

【讨论】：

我希望它在 chrome 84 中是可选的?
感谢您回答问题，但问题是它将禁用 chrome 提供的全新功能，如果我谈论第二个答案，则需要扩展更改

【解决方案2】：

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

*:focus {
  outline: none;
}

【讨论】：

【解决方案3】：

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

【讨论】：

上面已经给出了答案，不要给出和玛丽亚相同的答案。
她有没有提到如何关闭它。不要在反对票上大吃一惊。我不介意投反对票，但我在上下文中添加了一些内容。
我什至没有提到反对意见，也没有反对你的问题，我只是提供信息，请不要重复相同的答案，因为你的答案和 Maria 线程答案完全是副本猫，所以不要从其他网站复制粘贴答案
从开发人员的角度来看，这不是一个解决方案。这仅在您不喜欢将其视为用户时才有效。

【解决方案4】：

#问题解决方案：

转到下面的链接或复制粘贴 chrome url 选项卡并点击回车。

chrome://flags/#form-controls-refresh

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

【讨论】：

上面已经给出了答案，不要给出和玛丽亚相同的答案。
这实际上帮助了我很多。我不必打开任何第 3 方链接...

【解决方案5】：

唯一有用的是元素的 css 样式：outline: none;

【讨论】：

【解决方案6】：

你只需要在select标签css属性中设置outline:none

【讨论】：

这个答案并没有为这个问题添加任何有用的东西。已经有这样的答案了。

【解决方案7】：

我是这样解决的：

*, *:focus, *:hover {
    outline: none;
}

select {
    border: 0px none;
    border-radius: 0.001px; /* this value must be greater than 0, otherwise it won't work */
}

【讨论】：

【解决方案8】：

去找你和谷歌
辅助功能
转到：在焦点对象上显示快速突出显示关问题解决了。

【讨论】：

【解决方案9】：

更改边框颜色似乎可以消除黑色悬停状态

【讨论】：

不，这是错误的，请在回答任何问题前检查