Chrome中的CSS焦点伪类覆盖答案

【问题标题】：CSS focus pseudo-class overriden in ChromeChrome中的CSS焦点伪类覆盖
【发布时间】：2020-10-02 11:30:39
【问题描述】：

2020 年 5 月的某个时候，Chrome 对其 CSS 管理进行了更改。

聚焦和选择的输入字段的 CSS 现在被所选元素的 O/S（在我的情况下为 MacOS）外观设置覆盖。

<html>
   <head>
      <style>
         input.a { color:red; background-color:white; }
         input.a:focus { color:white; background-color:green; }
      </style>
   </head>
   <body>
      <input class=a type=text value='abcdef' onfocus='this.select();'>
      <input class=a type=text value='abcdef' onfocus='this.select();'>
   </body>
</html>

在新版 Chrome 中，字体颜色变为黑色。它在其他浏览器中保持白色。任何解决方法？

【问题讨论】：

被操作系统覆盖？你的意思是它被用户代理样式表覆盖吗？我不在mac上，所以无法在那里测试。在我的 chrome 上运行良好。

标签： css google-chrome select

【解决方案1】：

Mac 上 chrome 中的输入字体颜色仍然是白色。它是黑色突出显示文本的字体颜色。尝试添加这个 css 来控制突出显示颜色和突出显示的字体颜色：

来源：overriding-the-default-text-selection-color-with-css

::selection {
  background: #3a3a3a;
  color: white;
}

【讨论】：