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;
}