删除自动填充输入时的黄色背景

Posted 2023-02-22

【中文标题】删除自动填充输入时的黄色背景

【英文标题】：Remove the yellow background on input on autofill

【发布时间】：2015-05-21 03:15:06

【问题描述】：

有人知道如何在自动填充时删除这个丑陋的 chrome 背景吗？ （请参阅下文。）

到目前为止我尝试过：

*:focus 
    outline: 0;

input:-webkit-autofill 
    -webkit-box-shadow: none;
    -webkit-text-fill-color: #fff !important;

button:focus, input:focus, a:focus 
    text-decoration: none !important;
    outline: none !important;

遗憾的是，它们都不起作用。任何帮助、想法、线索、建议将不胜感激。

【问题讨论】：

您介意将自动完成设置为 false 吗？它可以从根本上解决您的问题。

@Zeratops：怎么做？

可能重复：[***.com/questions/2781549/…

Like this。只需在您的输入中添加autocomplete="off"。

@Zeratops：很酷，这至少可以在自动填充时看到丑陋的背景。谢谢！

【参考方案1】：

奇怪的是，这是来自 webkit 的 intended behaviour，让用户推断它是自动填充的。

[e-mail] 我们从 WebKit 继承了这种着色行为，我相信这是设计使然。它允许用户了解数据已被预填充。

你可以使用：

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

这会将背景变为白色。

您还可以通过添加关闭自动完成功能：

autocomplete="off"

例如

<input type="text" name="some_name" autocomplete="off"></input>

根据您的意见，但出于可用性考虑，我建议不要这样做。

【讨论】：

这就是我之前尝试过的，但似乎仍然无法正常工作，我的输入中有一个自定义背景图像，我想要的是在任何情况下都保留该背景图像。

自动完成关闭。这就是我现在可以为这个丑陋的问题做的最少的事情。谢谢。

谢谢！我想了很久。

【参考方案2】：

.form-item-search-block-form input:focus, 
.form-item-search-block-form input:hover, 
.form-item-search-block-form input:active 
    outline: 0 none;
    border: 0 none;
    background: #282828;
    background: url("../images/search_btn.png") no-repeat 96% 9px;
    color: rgb(202,202,202);


.form-item-search-block-form input:-webkit-autofill 
    -webkit-box-shadow: 0 0 0 1000px #282828 inset;
    -moz-box-shadow: 0 0 0 1000px #282828 inset;
    box-shadow: 0 0 0 1000px #282828 inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    -webkit-text-fill-color: #eee !important;

【讨论】：

这对我有用。不幸的是，我想让我的背景透明（这样你可以在它后面看到一个图标），这使它再次显示为黄色，所以图标仍然被覆盖。但对于那些希望背景扎实的人来说，这似乎行得通。

【参考方案3】：

将此添加到您的标题中

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus 
  border:none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
  transition: background-color 5000s ease-in-out 0s;

这似乎修复了黄色重新填充鼠标离开的后遗症

【讨论】：

只有一件事，你应该添加box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0px 9999px white，这样当你有材料设计输入时你的盒子阴影线就会保持;)

哈哈谢谢你的提示！我是分析师； html 和 css 不是我的菜