活动时删除选择选项中的边框答案

【问题标题】：Remove border in select option when active活动时删除选择选项中的边框
【发布时间】：2020-09-06 21:30:58
【问题描述】：

您是否已经注意到谷歌最近在 Chrome 的选择选项中实现了一个边框？任何想法如何禁用此功能？ Firefox 没有这个边框。

谷歌浏览器版本 83.0.4103.61（64 位）

<html>
<head>
    <style>
        select option:focus {
            border:0px;
            outline:0px;
            -webkit-appearance: none;
            outline: none !important;
        }
    </style>
</head>
<body>
    <select>
        <option>Test11</option>
        <option>Test22</option>
    </select>
</body>
</html>

jsfiddle.net/fq3korhg/

【问题讨论】：

这是一个跨多个浏览器和平台的新的可用性重新设计。虽然我很欣赏这个目标，但选择列表的最终结果是丑陋的。像下面的两个答案一样设置 outline: none 对此没有影响。 blog.chromium.org/2020/03/…
还有：support.google.com/chrome/thread/48974735?hl=en
您可以通过转到 chrome://flags/#form-controls-refresh 并禁用“Web 平台控件更新的 UI”在 Chrome 中禁用。但这显然只适用于您和您的浏览器，并不能帮助您正确设置网站的样式。事实上，它隐藏了所有其他用户仍会看到的丑陋。

标签： html css google-chrome styles

【解决方案1】：

需要为选择设置属性：

select:focus {
  outline: none; 
}

【讨论】：

【解决方案2】：

试试这个：

select:focus {
    outline:none;
}

【讨论】：

最新版谷歌浏览器不支持