删除 Chrome 自动完成的输入背景颜色?

问题描述

在我正在处理的表单上，Chrome 会自动填充电子邮件和密码字段.这很好，但是，Chrome 会将背景颜色更改为淡黄色.

On a form I'm working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour.

我正在做的设计是在深色背景上使用浅色文本，所以这确实弄乱了表单的外观 - 我有明显的黄色框和几乎不可见的白色文本.字段聚焦后，字段恢复正常.

The design I'm working on is using light text on a dark background, so this really messes up the look of the form - I have stark yellow boxes and near-invisible white text. Once the field is focused, the fields return to normal.

是否可以阻止 Chrome 更改这些字段的颜色?

Is it possible to stop Chrome changing the colour of these fields?

推荐答案

您可以更改输入框样式以及 input 框内的文本样式:

You can change input box styles as well as text styles inside input box:

在这里您可以使用任何颜色，例如white, #DDD, rgba(102, 163, 177, 0.45).

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

但是 transparent 在这里不起作用.

But transparent won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

此外，您可以使用它来更改文本颜色:

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

建议:不要使用数百或数千的过度模糊半径.这没有任何好处，并且可能会将处理器负载置于较弱的移动设备上.(对于实际的外部阴影也是如此).对于一个 20px 高的普通输入框，30px 的模糊半径"将完美覆盖它.

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.

这篇关于删除 Chrome 自动完成的输入背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！