Chrome hiding background image with autofills

Question

Hi guys Im working on basic signup and signin forms.In my input fields I consist of background image and white color.In chrome autofill was replacing my background image and color with pale yellow color.For this I have searched and found out few lines of code....

input:-webkit-autofill {
background-color: #FAFFBD !important;
  }

This was making my backgroundcolor to display...but Unable to show the backgroundimage in input field.Can I get few bits of code to show the background image when autofill in chrome.

 input#email {
background: url("~mail.png") no-repeat scroll  16px 11px #FFFFFF;
background-size: 20px 20px;
z-index: 999;
}

Need to show your css and html if you want a proper answer. – misterManSam Dec 06 '13 at 08:16 — misterManSam, Dec 06 '13 at 08:16

score 0 · Answer 1 · answered Dec 06 '13 at 08:15

0

IMHO, you can do this in 2 ways

1: put a z-index field on your css to your background image so that it overlaps whatever is overlapping it at the moment

z-index: 999 //for example

2: Or make your image have top-margin to make way for the input field's autofill space:

margin-top: 25px;

answered Dec 06 '13 at 08:15

vishnu

730
2
6
26

sorry just a suggestion – vishnu Dec 06 '13 at 08:26

score 0 · Answer 2 · answered Dec 06 '13 at 08:19

0

Try the change with jQuery:

if ($.browser.webkit) {
    //$('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="password"]').attr('background-image', 'src');
}

answered Dec 06 '13 at 08:19

Mouhamad Ounayssi

351
3
19

1

Suggestion: you case give an absolute div with background image behind the input and give a background none, transparent for the input, to display the background image, but i don't sure if the background image will be viewed with auto fills! – Mouhamad Ounayssi Dec 06 '13 at 11:32

Chrome hiding background image with autofills

2 Answers2

Linked