0

at the moment I'm creating simple forms for login and registration purposes. The style is changed to a transparent background and I created a floating label. So far so good, everything is working perfectly fine.

enter image description here

When I input some data manually, the label is getting smaller and goes to the top as wanted, and the background stays transparent.

enter image description here

But here is the problem. Although auto-complete is switched off, there is an auto-complete option made by my browser. If I'm selecting the suggestion for the input field, it somehow switches to a yellowish color.

enter image description here

Any ideas where this is coming from and how I can prevent this from happening ?

Thanks for your time!

Seba M
  • 99
  • 1
  • 8

1 Answers1

2

You can overwrite this with the following CSS:

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-color: transparent!important;
}

On Google Chrome you should do the following:

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px red inset;
}

More information about removing the autocomplete color in Google Chrome here: Removing input background colour for Chrome autocomplete?

You can avoid the flash up of the yellow background on selecting the autocomplete-value by adding input to the CSS rules.

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
  • I added both lines to my CSS and it works nearly perfect. When I click and the field is getting autocompleted, the yellow color/nackground flashes up for a splitsecond in a weird way, but in the end it is transparent – Seba M Oct 08 '17 at 13:20