无效的选择器 webkit-credentials-auto-fill-button

Posted 2023-02-24

【中文标题】无效的选择器 webkit-credentials-auto-fill-button

【英文标题】：Invalid selector webkit-credentials-auto-fill-button

【发布时间】：2017-05-02 09:10:18

【问题描述】：

我正在尝试设置以下 Safari 密码字段中显示的钥匙图标的样式：

我正在尝试以下方法：

input::-webkit-credentials-auto-fill-button 
  color: white;

<input type="password" class="form-control form-control-lg" name="password" ngModel required placeholder="password">

但这不起作用。知道为什么吗？

【问题讨论】：

可以分享相关的 html 和 CSS 吗？我们没有水晶球

哈哈。我对此感到非常抱歉！ CSS在上面，只是在代码中，并没有真正的HTML，它只是一个输入标签！！

在这里，我只是将它明确添加到问题中:)

您的代码中的key 图标在哪里？你需要为你的问题创建一个工作示例:)

但是这个图标完全由Safari管理！我根本没有做任何事情来展示它。这是 Safari 自己的自动填充图标。事实上，例如在 Chrome 上，它根本不会出现！

【参考方案1】：

为这些元素设置样式的不直观之处在于您需要使用background-color：

input::-webkit-credentials-auto-fill-button 
    background-color: white;

这里已经有类似-webkit-contacts-auto-fill-button 元素的答案：

Safari - Webkit contacts autofill button icon change color on empty

【讨论】：

对于希望完全隐藏此元素的任何人，请使用width: 0; margin: 0。 display: none 好像不行