从 Chrome 中打开的 SELECT 元素中删除样式？答案

【问题标题】：Remove styles from open SELECT elements in Chrome?从 Chrome 中打开的 SELECT 元素中删除样式？
【发布时间】：2018-03-23 06:55:46
【问题描述】：

当前稳定版本的 Chrome (v61) 在样式化 select 元素时表现出一些不良行为。如果您通过 CSS 增加元素的字体大小，它在 Chrome 中的“打开”状态也会继承这些增加的字体大小 (working example)。

其他浏览器不会显示这一点 - 例如。 Firefox v59 – 使 Chrome 中的样式化 select 元素难以使用。

当select 仅在 Chrome 中“打开”时，有没有办法从显示的选项中删除样式？使用:focus 没有明显效果。

【问题讨论】：

【解决方案1】：

您可以轻松地将 option 元素的 font-size 设置回默认的 html 字体大小：

option {
  font-size: 1rem;
}

【讨论】：

不幸的是，这并没有达到预期的效果。我需要为“折叠”状态保留大字体，以匹配规定的 UI 设计，但扩展菜单应以浏览器的默认大小显示 option 文本。使用:focus 修饰符来定位option 元素并将它们设置为1rem 会给select 的布局带来不希望的折叠效果，直到用户点击离开（即再次取消选择select）。
@markedup 您描述的行为（我需要将大字体保持为“折叠”状态，以匹配规定的 UI 设计，但展开的菜单应在浏览器的默认大小。) 正是这样做的。我没有使用:focus 修饰符。您只需将代码复制并粘贴到您的代码中即可。
我同意亚当的观点。这会为我产生 OP 的指定行为。
@adam @josh 在 Chrome 中，我认为添加上述内容没有区别； option 字体大小与父 select 应用的“封闭”样式一样大。
鉴于@Adam 和我都看到相同的东西，我想知道我们的环境（与您的环境相反）是否存在一些差异。您使用什么操作系统？仅供参考 - 这是我所看到的屏幕截图：snag.gy/ZLnPAj.jpg