在自动填充输入上删除黄色背景

Question

任何人都知道如何在自动填充时删除这个丑陋的铬背景？ （参见下文。）

到目前为止，我试过了：

*: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;
}

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

Answer 1

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

  

ben@chromium.org   我们从WebKit继承了这种着色行为，我相信它是设计的。它允许用户理解已预先填充的数据。

您可以使用：

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

将背景更改为白色。

您还可以通过添加：

来关闭自动完成功能

autocomplete="off"

E.g

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

根据您的意见，但为了实用性，我建议不要这样做。

Answer 2

将其添加到标题中

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;
}

这似乎可以解决黄色重新填充在mouseleave

上的后遗症

Answer 3

.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;
}