1

Jsfiddle: jsfiddle.net/dlnkprs/MR33L/

I'm creating a different style for a Wordpress login form. I've put an icon in both username and password field. Displaying this:

Normal

But.. when you use Chrome's autofill the background turns yellow and the icons disappear:

Chrome autofill

Any idea how to solve this so the icons are still visible?

1

2 Answers 2

1
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

This will make it so the background of the inputs are white, and you can obviously change the colour to whatever you like. Unfortunately I can't find any way to make the icons appear in front of the yellow background, so the best thing I can recommend is to turn autocomplete off in each input element by adding the autocomplete="off" attribute to them.

Sorry I couldn't have been more helpful.

2
  • Then I need to edit Wordpress' core files (wp-login.php). That's no option because of updates. Any way to add the code on a different manner?
    – dynkapars
    Mar 5, 2014 at 22:26
  • To add the attributes to the elements you would need to edit the file, I can't think of any way to do it otherwise. Surely you could just edit it every time there is an update?
    – ntzm
    Mar 5, 2014 at 23:57
1

You can create a span element just at the left of each input box with the icon as background. With this you separate the input from the actual icon and keep the autocomplete functionality.

Demo: http://jsfiddle.net/pt8Rb/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.