Google Chrome disable yellow input form field (NO FLASH)

Question

So, I searched for a while to see if I can disable the yellow color bg chrome adds to fields it remembers... This is a little annoying to my theme.

I found this code that fixes it!

<script type="text/javascript">
  $(function() {
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    var intervalId = 0;
      $(window).load(function() {
        intervalId = setInterval(function () { // << somehow  this does the trick!
          if ($('input:-webkit-autofill').length > 0) {
            clearInterval(intervalId);
            $('input:-webkit-autofill').each(function () {
              var text = $(this).val();
              var name = $(this).attr('name');
          $(this).after(this.outerHTML).remove();
          $('input[name=' + name + ']').val(text);
            });
          }
        }, 1);
      });
    }
  });
</script>

The issue is this little flash of yellow when you try it

Also here is my form....

<form action="login.php" method="post" class="form-container">

  <input class="menu_button" type="submit" value="Login">
  <a href="register.php" class="menu_button">Register</a><br>

  <input autocomplete="off" class="form-field" value="Username" type="text" name="username"   onfocus="if (this.value=='Username') this.value='';"/><br />
  <input class="form-field" value="Password" type="password" name="password" onfocus="if   (this.value=='Password') this.value='';"/><br />

</form>

Is this simply because Chrome has glitches with it or something of that sort....

Is it even possible to fix?

It's OK to answer your own question. If you have found a solution use the "Answer" button and post your solution there rather than editing the answer into the question. As it stands, it's not clear whether your question has been answered or not. — , Oct 20 '13 at 19:53
@popnoodles I've already done that, I am talking about the flash — user2551856, Oct 20 '13 at 19:54
Oh. Is it really that important? Start with the fields' opacities at 0? — Popnoodles, Oct 20 '13 at 19:58
I agree with the earlier _possible duplicate of [How do I stop Chrome from yellowing my site's input boxes?](http://stackoverflow.com/questions/175951)_, specifically [this popular but unaccepted answer](http://stackoverflow.com/a/582741/7469). — Evan Davis, Oct 20 '13 at 20:01
NO~~~~~~~~~~~~~ It's not a duplicate.... I want to figure out how to disable the yellow flash — user2551856, Oct 20 '13 at 20:09
@popnoodles How exactly would I do the opacity starting at 0? — user2551856, Oct 20 '13 at 20:10
CSS `input{opacity:0}`, jQuery `$('input').css({opacity:1});` EDIT: Wait, WHEN do you see the flash? — Popnoodles, Oct 20 '13 at 20:12
@popnoodles wouldn't that make it flash invisible instead of yellow?......EDIT...actually nvm. I realized it still makes it look nicer. Put that as an answer and I will mark it as correct — user2551856, Oct 20 '13 at 20:18

score 0 · Accepted Answer · answered Oct 20 '13 at 20:31

You could hide the elements with CSS

/* may as well target Chrome (catches Safari too tho) */
@media screen and (-webkit-min-device-pixel-ratio:0){ 
    input{
        opacity:0;
    }
}

Then show them after that webkit business kicks in.

$('input').css({opacity:1});

Yes they'll be invisible on load but that shouldn't really be noticeable.

Google Chrome disable yellow input form field (NO FLASH)

1 Answers1