Issue with autocomplete

[leforthomas]

Thanks for the theme!

I have an issue with Chrome and autocomplete. This is beyond my css knowledge and driving me nuts. I'm adding a screenshot below.

For some reason the autofill internal chrome css preempts everything else and it overlays on top of the label and the border and it doesn't look very good.

I tried various things such as forcing the background color to transparent (not working) moving the input downwards using zindex (prevents the click form working...). Any idea?

[msidlo]

Hi @leforthomas.

I know it's been some time you've posted your question. But I hope my answer can help others. I was able to find relatively simple solution by adding some css. This is the result.

I added class with following properties for <input >

.browser-autocomplete-input {
    padding: 0px!important;
    border-radius: 4px;
    margin: 12px 15px 12px 48px;
}

[leforthomas]

Thanks! I eventually managed using css as well but yours looks better :)

[rubensflinco]

Here's a modification to the CSS code that helps to not have to add the CSS class in each input manually, just add these CSS codes and that's it:

input:-webkit-autofill {
    padding: 0px!important;
    border-radius: 4px;
    margin: 12px 15px 12px 48px;
}

[shampain6660]

I came here to submit a PR fix to address this cause it shat me, and found this issue. Should have come here first!
Here was my fix, which removes the autofill completely, maintaining the original look and feel:

/* Handle browser autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent !important;
}

I don't have permission to create a PR, so this will have to do.