Chrome Browser Hiding Background Image In Input Box On Autofill

Question

I have login popup on a webpage. The login form contains two fields username and password. Both input fields have a background image (shown with help of CSS).

But during login, autofill of chrome browser populates data in the form fields and hides background image , image is shown on the extreme left of the input fields. So, its not like text is overriding image.

I read other answers suggesting moving image out of the input fields. I need image in input box only. What CSS or JS trick can be used here to show background image in input box even on autofill of Chrome browser?

Here is what I am trying:

HTML:

<input class="form-text-inputs"
       type="text"
       name="password"
       ng-pattern="ctrl.usernameRegex"
       placeholder="{{'USER.PASSWORD_PLACEHOLDER' | translate}}"
       ng-model="ctrl.password"
       maxlength="50"
       required>

CSS:

input[type = 'password'] {
    background-image: url(../assets/images/passwordimage.png) ;

    padding-left: 36px;
}

score 1 · Answer 1 · answered Jul 24 '16 at 11:36

1

You can turn off the browser's in-built autocomplete by adding autocomplete="off" to the input element.

<input class="form-text-inputs"
       type="text"
       name="username"
       ng-pattern="ctrl.usernameRegex"
       placeholder="{{'USER.USERNAME_PLACEHOLDER' | translate}}"
       ng-model="ctrl.username"
       maxlength="50"
       required autocomplete="off">

Also, the CSS selector is wrong. It should be input[type=text] instead of input[type=username]

answered Jul 24 '16 at 11:36

Shashank Agrawal

25,161
11
89
121

1

Setting autocomplete="off" won't play well with chrome usually. Checkout this thread: http://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off – David R Jul 24 '16 at 11:41

score 1 · Accepted Answer · answered Jul 24 '16 at 12:45

Finally found the solution.This is how it looks now.

    input[type = 'password'] {
background-image: url(../assets/images/password.png) ;
-webkit-appearance: none;
padding-left: 36px;}

input[type = 'password']:-webkit-autofill {
background-image: url(../assets/images/password.png) ;


-webkit-appearance: none;
padding-left: 36px;
-webkit-box-shadow: 0 0 0 1000px white inset !important;

}

Chrome Browser Hiding Background Image In Input Box On Autofill

2 Answers2

Linked