单击谷歌浏览器自动完成建议后如何设置文本输入样式？

Posted 2023-04-18

【中文标题】单击谷歌浏览器自动完成建议后如何设置文本输入样式？

【英文标题】：How to style Text input after clicking a google chrome auto complete suggestion?

【发布时间】：2020-11-24 17:12:39

【问题描述】：

我遇到了一点麻烦，我似乎找不到/使用正确的伪类，希望这里的某个人能够告诉我哪个是正确的。

我的问题是 google chrome 有您以前输入到文本输入中的值，这很好，但如果您单击其中一个建议，我似乎无法正确设置样式。我的样式在文本输入的所有其他方面都可以正常工作，但是当您从 chrome 的先前值列表中选择一个选项时，我的文本输入的背景变为蓝色，这是我不想要的。我尝试了:active、:visited 和其他一些，但我认为我使用了不正确的类。

请有人帮助我，我似乎找不到合适的东西。

谢谢。

【参考方案1】：

对于 webkit 浏览器，您可以使用 -webkit-autofill:

input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover, 
input[type="text"]:-webkit-autofill:focus, 
   color: blue;
   background: red;

查看this article 了解更多信息。

【参考方案2】：

将此添加到您的 css 中，并为其添加所需的样式。

/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus 
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;

查看this article，了解更多信息。