从Chrome电子邮件自动填充后摆脱输入上的黄色填充

Question

I have a simple username-password form set up with some styles applied to it. It works great. The problem comes when I login more than one time.

Namely, since Chrome recognizes my email, it tries to auto-fill it. If I oblige, the username textbox acquires a repulsive yellow color. See images below for screenshots.

How can I stop this from happening? I have not tested thoroughly, but it seems that neither Firefox nor Safari has this issue.

Answer 1

You can use :-webkit-autofill CSS pseudo-class, it matches when an element has its value autofilled by the browser.

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