从选择下拉列表中删除轮廓（Windows 7 上的 Chrome）答案

【问题标题】：Remove outline from select dropdown (Chrome on Windows 7)从选择下拉列表中删除轮廓（Windows 7 上的 Chrome）
【发布时间】：2017-10-15 16:24:15
【问题描述】：

我正在尝试从select 元素的选项列表中删除蓝色轮廓。

因为我只在 Windows 7 上的 Chrome 上看到这个轮廓，所以这里有一张图片指出了我正在谈论的轮廓

我也尝试在option:focus 上使用outline-color，但似乎没有任何效果。有没有什么办法只使用 CSS 来摆脱这个大纲？

【问题讨论】：

【解决方案1】：

由于浏览器对单选按钮、复选框和选择下拉菜单等元素的 UI 美学处理方式不同，因此如果不使用 JS 或复杂的 CSS/HTML 就很难克服。我认为 Select 元素比单选按钮和复选框更难，我认为没有可靠的 HTML/CSS 仅用于此。

抱歉，我知道这不是您要找的答案。您也可以尝试“border: 1px solid #COLOR”作为最后的尝试。

【讨论】：

【解决方案2】：

appearance: none 规则稍微改变了显示（在 Ubuntu/Chromium 上），但使其更加错误：没有右边框，但仍有一些左边框（对 firefox 没有影响）。

正常：

与appreance: none:

您可以使用background-color，它也适用于<option>，使其更接近您的轮廓颜色，以便将其隐藏一点。

select.lalala option {
  background-color: #727272;
}

恕我直言，没有任何视觉上可接受的东西。

顺便说一句，这是特定于浏览器的，也可能是特定于操作系统的，所以这似乎是浪费时间。

【讨论】：