Sprites disappearance in inputs with autocomplete in webkit

Question

Here is my login form: http://cssdeck.com/labs/wvpad3mc

I have a nice issue with webkit: if I have saved my password in Chrome, and i load my login page, Chrome passes my login and password to inputs and hides sprites

Without saved password:http://i.stack.imgur.com/dNu9G.jpg

And with (Chrome disabled sprites): http://i.stack.imgur.com/oqhsT.jpg

Does anyone know how to make sprites stay on their places without disabling autocomplete feature?

(sorry for links, can`t add images yet)

UPDATE(with answer):

As @Allan has mentioned, there is only one way(with different approaches) to make something suitable. BECAUSE due to this wonderful thing: https://code.google.com/p/chromium/issues/detail?id=46543 , this is a well known bug, which stretches throughout the Universe since 2010! Why Google Webkit dev team don`t fix it already is The Mystery of Unknown Realms.

Here is my new code, that solved MY CASE.

You may also use font-icons instead of spans(or divs) or some other :pseudo magic.

Have you tried adding !important to the background attribute? — Allan, Sep 05 '14 at 15:08
If I'm not mistaken the auto complete sometimes wants to change the background color of the affected field. I don't know in this particular case. — Allan, Sep 05 '14 at 15:09
@Allan Yeah, I did, and tried few different things too. Nothing helps for now. Autocomplete definitely changes background, but I couldn`t google anything about sprites or whatever similar — Zanshin13, Sep 06 '14 at 10:44

score 0 · Accepted Answer · answered Sep 06 '14 at 16:27

Maybe you could do something like this.

here is my fiddle

http://jsfiddle.net/t0dhk8hr/1/

Here is my CSS

.myInput {
    position: relative;
    outline: rgba(0,0,0,.2) dashed 1px;
    padding: 5px;
}

.Text {
    border: #666 solid;
    border-width: 1px 1px 1px 0px;
    clear: both;
}
span.icon {
    float: left;
    border: #666 solid;
    border-width: 1px 0px 1px 1px;
    background: white;
    display: inline-block;
    width: 25px;
    height: 17px;
    margin: 2px -2px;
}
span.icon.one {
    background: url(http://sweetclipart.com/multisite/sweetclipart/files/cat_3_orange.png) no-repeat center center transparent;
    background-size: 12px 12px;
}
span.icon.two {
    background: url(http://www.tomstuder.com/wp-content/uploads/2012/07/dog-011.png) no-repeat center center transparent;
    background-size: 12px 12px;
}

Here is my HTML

<div class="myInput">

    <input type="text" class="Text" placeholder="Username" />
    <span class="icon one"></span>
</div>
<div class="myInput">

    <input type="password" class="Text" placeholder="Password" />
    <span class="icon two"></span>
</div>

There are other was to come up with the same visual result, but this is one. Another one its by using ::before element on my .myInput class, that way we dont need to define the span inside that dom element, but we will need to define an extra class for each icon at the same item where .myInput its been used.

Greeting @Allan, I was afraid that this option will be the only one, and so it is : due to https://code.google.com/p/chromium/issues/detail?id=46543 this bug was detected in 2010 AND STILL(!) not fixed by dev team. So I ended up with something like that: http://cssdeck.com/labs/flat-blue-login-form-with-google-autocomplete-bug-fix So your answer is the only right option, except simply ignoring autocomplete — Zanshin13, Sep 08 '14 at 14:09
I'm glad I was able to help you on this little issue. Just remember to set this as answered ^_^ — Allan, Sep 08 '14 at 20:35
Sure did ;) plus added some info to the topic. Thanks for the help! — Zanshin13, Sep 10 '14 at 08:11

score 0 · Answer 2 · edited May 23 '17 at 12:23

You're issue is that Chrome changes the background styling of certain fields when it's autofilling the data.

You can override it with a simple pseudo selector:

:-webkit-autofill {
    background: #FFF;
}

In your case, you would just need to enter your sprite URL into there, as such:

.auth-inputs input:-webkit-autofill {
    background: #fff url(http://www.red-team-design.com/wp-content/uploads/2011/09/login-sprite.png) no-repeat;
}

Although I wouldn't recommend linking to someone else's sprite file, I would recommend uploading your own sprite to your server.

If you're looking for more information, you may want to visit: Google Chrome form autofill and its yellow background or Removing input background colour for Chrome autocomplete?

**Hello and thanks for the reply.** First of all - of course I am using my own sprite on my dev, the link here was just for speeding up my example writing. Second of all - all of your code won`t work, cause [censored] predefined google`s styles for autocomplete will rewrite anything except `-webkit-box-shadow:` (which IS in my example right at the end of css file) — Zanshin13, Sep 08 '14 at 09:40

Sprites disappearance in inputs with autocomplete in webkit

2 Answers2