Input:-webkit-autofill: the background color of the chrome input box turns yellow, and the input box turns black.

Input:-webkit-autofill: the background color of the chrome input box turns yellow, and the input box turns black.

A pitfall found when entering the form!

When you have filled in a form before and get the focus, the input will have a drop-down attention type of the text filled in before, just like this: (sorry, it's ugly, privacy issues are Mosaic)

It is reasonable to say that there is no problem. It is often required to record the input for convenience. However, it is also found that the text box is yellow! And when you select the text, it is still yellow!

It's really a slot... It's not what I want! Why? Why? I don't know. Other browsers won't ~ How does chrome always show people in a good image become like this?

Okay, you can only Google it in Baidu! I am not the only one who has encountered such a problem!

It turns out that:

Let's see, not only does input, textarea, and select have the same, but only "-webkit! When you see this, you will surely think of setting background-color to overwrite it, so it starts to happen to code ...... after a few seconds of tossing, you will find confidence in the refreshing... this is nothing to use ~

No matter why he wants to do this, if a large company wants to do this, can you beat him ?! Let's look at the solution!

Method 1:

This occurs only when an input record exists. Therefore, you can only disable the input record! For example: <input type = "text" autocomplete = "off"> so that when you click input, it will not have that list! The whole world is clean! Of course, if you can tolerate the yellow color, you can also give it to "on", or do not set it, Because autocomplet is 'on' by default!

However, in many cases, you may not be allowed to remove simple and convenient records! What should I do?

So,

Method 2:

-Webkit-box-shadow: 0 0 0px 1000px white inset. That's right. It's a built-in shadow for input! It must be large, at least larger than your input itself! However, box-shadow is very slow! Moreover, if your input uses an image as the background, there is no way to do this! Therefore, in actual development, you have to weigh your choice!

Of course, if anyone has a better solution, I also hope to give some advice!