Prevent the browser from filling in the email and password field

Question

Prevent the browser from filling in the email and password field

Asked 6 years, 7 months ago

Viewed 164 times

0

When you add the password and email value in the type of an input, the browser changes the background of this input to the yellow color and fills the user data automatically. Is there a way to prevent this event:

This happens to all browsers or you are being specific to one only?

– Sam

2018/05/17 at 13:48
No, the question was generic anyway

– Francis Vagner da Luz

2018/05/17 at 13:50
I wonder if there’s any way to prevent it at all, if not, just google

– Francis Vagner da Luz

2018/05/17 at 13:55
Francis you tested there, I managed to change the color?

– hugocsl

2018/05/17 at 14:08
I switched, but it wasn’t quite what I thought was going to happen, it got a little weird yet, but I didn’t invest much time in the code. I think if I change some things it’ll get better.

– Francis Vagner da Luz

2018/05/17 at 14:09
I tried to test site here, but I’m not getting it on my Chrome. Qq way qq problem tells me that I try to give you a strength

– hugocsl

2018/05/17 at 14:10
So he changes the color, but I’m trying a rgba color on the background, but he won’t accept

– Francis Vagner da Luz

2018/05/17 at 14:15
To avoid autocomplete, put it on the fields like this: autocomplete="new-email" and autocomplete="new-password"

– Sam

2018/05/17 at 14:17
About the color tested so on the site of Santader! and it worked! -webkit-box-shadow:0 0 0 1000px rgba(255,0,0,1) inset;

– hugocsl

2018/05/17 at 14:17
The problem is that if you put a more neutral rgba, starting from the white color, for example, it seems that the transparency stays on a color and not on the background of my site.

– Francis Vagner da Luz

2018/05/17 at 14:22
Francis I believe that’s because the yellow color is still there. what this style does and put an internal shade on the input, thus making an internal shade that sits on top of the standard color. Notice that it is a box-shadow -webkit-box-shadow You can try to put transparency in the input as a whole and not in the color with rgba to see how it looks...

– hugocsl

2018/05/17 at 14:31
1

Yes, then I will invest more in this solution... Thank you very much Hugo

– Francis Vagner da Luz

2018/05/17 at 14:34

Show 7 more comments

1 answer

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-05-17T13:55:07+00:00

This yellow color as far as I know the pattern of Chrome and you can remove it like this:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 1000px #fff inset; /* muda o background color */
    -webkit-text-fill-color: #333; /* muda a cor do texto*/
}
input {
    background-color: #fff;
    color: #333;
}

About the autocomplete you can take the whole form

<form autocomplete="off">
...
</form>

Or direct in input

<input type="email" autocomplete="off">

About the <input type="password"> in it the autocomplete="off" will not work for the Password because of a browser engine. Exestem other answers about it. One way to solve is by having 2 password fields. The first vc puts display:none. The Browser in some This only fills the first password field, then the second that will be visible and will be empty...

OBS: You can also do a two-step validation like Google. First you ask for the email and do the validation, then in the next step you ask for the password. So the password field is not visible immediately face the user, and only appears after validating the email.