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

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.