Chrome 自动填充黄色背景高于表单字段中的图标

Posted 2023-03-05

【中文标题】Chrome 自动填充黄色背景高于表单字段中的图标

【英文标题】：Chrome autofill yellow background goes above icon in form field

【发布时间】：2014-04-07 18:45:16

【问题描述】：

jsfiddle：jsfiddle.net/dlnkprs/MR33L/

我正在为 Wordpress 登录表单创建不同的样式。我在用户名和密码字段中都放了一个图标。显示这个：

但是.. 当您使用 Chrome 的自动填充功能时，背景会变成黄色并且图标会消失：

知道如何解决这个问题，让图标仍然可见吗？

【问题讨论】：

jsfiddle.net/dlnkprs/MR33L。不知道它是否可以与 jsfiddle 一起使用，因为您需要自动填充。

【参考方案1】：

您可以在每个输入框的左侧创建一个span 元素，并将图标作为背景。这样您就可以将输入与实际图标分开并保留自动完成功能。

演示： http://jsfiddle.net/pt8Rb/

【参考方案2】：

input:-webkit-autofill 
    -webkit-box-shadow: 0 0 0 1000px #fff inset;

这将使输入的背景为白色，您显然可以将颜色更改为您喜欢的任何颜色。不幸的是，我找不到任何方法让图标出现在黄色背景的前面，所以我推荐的最好的方法是通过向它们添加 autocomplete="off" 属性来关闭每个输入元素中的自动完成功能。

很抱歉，我无法提供更多帮助。

【讨论】：

然后我需要编辑 Wordpress 的核心文件（wp-login.php）。由于更新，这是没有选择的。有什么方法可以以不同的方式添加代码？

要将属性添加到您需要编辑文件的元素中，否则我想不出任何方法。当然每次有更新时你都可以编辑它？