在Chrome中被重写的CSS焦点伪类

Question

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

现在，所选元素的O/S (在我的例子中是MacOS)外观设置将覆盖被聚焦并被选中的输入域的CSS。

​

<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中，字体颜色改为黑色。它在其他浏览器中仍然是白色的。有什么解决方法吗？

Answer 1

在mac上，chrome的输入字体颜色仍然是白色的。它是突出显示的文本的黑色字体颜色。尝试添加此css以控制突出显示颜色和突出显示的字体颜色：

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

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