Removing input background colour for Chrome autocomplete?

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.

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

---

This works fine, You can change input box styles as well as text styles inside input box :

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

But transparent won't work here.

/* Change the white to any color ;) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

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

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

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.

---

I have a better solution.

Setting the background to another color like below didn't solve the problem for me because I needed a transparent input field

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

So I tried some other things and I came up with this:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

---

The previous solutions of adding a box-shadow works well for people who need a solid colour background. The other solution of adding a transition works, but having to set a duration/delay will mean that at some point it may show again.

My solution is to use keyframes instead, that way it will always show the colours of your choosing.

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

链接地址: http://www.djcxy.com/p/26452.html

上一篇: 填写Safari 7

下一篇: 删除Chrome自动填充的输入背景颜色？