在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。

我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。

有可能阻止Chrome改变这些字段的颜色吗?


当前回答

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

其他回答

我们可以使用-webkit-autofill伪选择器来定位这些字段,并按照我们认为合适的方式设置它们的样式。默认样式只影响背景颜色,但大多数其他属性都适用于此,例如border和font-size。我们甚至可以使用-webkit-text-fill-color来更改文本的颜色,下面的代码片段中包含了它。

/* Change Autocomplete styles in Chrome*/
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;
    transition: background-color 5000s ease-in-out 0s;
}

这对我很有用。

.input:-webkit-autofill{过渡:background-color 5000 0s ease-in-out 0;}

要有一个透明的背景,同时不使用时间延迟(特别是在现代web应用程序中,人们可以停止使用它一段时间,并希望界面的行为是可预测的),使用这个:

input:-webkit-autofill { 
    -webkit-background-clip: text;
}

身体{ 背景:lightblue; } 输入{ 背景:透明; } 输入。no-autofill-bkg: -webkit-autofill { -webkit-background-clip:文本; } <input type="text" name="email" /> <input type="text" name="email" class="no-autofill-bkg" />

工作环境:Chrome 83 / 84.0.4147.89, Edge 84.0.522.44

如果你决定重新发布我的解决方案,我只要求你包括我的名字或链接到这个。

使用这个检查你的问题是否解决了

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly> 

谷歌Chrome用户代理阻止开发者的CSS,所以改变自动填充UI必须使用另一个属性,像这样:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}