Google Chrome form autofill and its yellow background

Question

I have design problem with Google Chrome and its form autofill function  If Chrome remembers some login password it changes a background color to a yellow one   Here are some screenshots      How to remove that background or just disable this autofill

User · Answer

I fixed this issue for a password field i have like this:

Set the input type to text instead of password

Remove the input text value with jQuery

Convert the input type to password with jQuery

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

User · Answer

This fixes the problem on both Safari and Chrome  if navigator userAgent toLowerCase   indexOf  chrome    gt   0    navigator userAgent toLowerCase   indexOf  safari    gt   0   window setInterval function           input -webkit-autofill   each function            var clone     this  clone true  true             this  after clone  remove               20

User · Answer

If you guys want transparent input fields you can use transition and transition delay    input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active       -webkit-transition-delay  9999s      -webkit-transition  color 9999s ease-out  background-color 9999s ease-out

User · Answer

An update to Arjans solution  When trying to change the values it wouldnt let you  This works fine for me  When you focus on an input then it will go yellow  its close enough     document  ready function         if navigator userAgent toLowerCase   indexOf  chrome    gt   0    navigator userAgent toLowerCase   indexOf  safari    gt   0           var id   window setInterval function                   input -webkit-autofill   each function                    var clone     this  clone true  true                     this  after clone  remove                               20               input -webkit-autofill   focus function   window clearInterval id                    input -webkit-autofill   focus function   window clearInterval id

User · Answer

Here s a Mootools solution doing the same as Alessandro s - replaces each affected input with a new one   if  Browser chrome            input -webkit-autofill   each function item            var text   item value          var name   item get  name            var newEl   new Element  input            newEl set  name   name           newEl value   text          newEl replaces item

User · Answer

None of the solutions worked for me  the username and password inputs were still being populated and given the yellow background   So I asked myself   How does Chrome determine what should be autofilled on a given page     Does it look for input ids  input names  Form ids  Form action    Through my experimentation with the username and the password inputs  there were only two ways I found that would cause Chrome to not be able to find the fields that should be autofilled   1  Put the password input ahead of the text input  2  Give them the same name and id     or no name and id   After the page loads  with javascript you can either change the order of the inputs on the page  or dynamically give them their name and id      And Chrome doesn t know what hit it     autocomplete stays off   Crazy hack  I know  But it s working for me   Chrome 34 0 1847 116  OSX 10 7 5

User · Answer

In Firefox you can disable all autocomplete on a form by using the autocomplete  off on  attribute   Likewise individual items autocomplete can be set using the same attribute    lt form autocomplete  off  method      action      gt     lt input type  text  name  textboxname  autocomplete  off  gt    You can test this in Chrome as it should work

User · Answer

I use this   input -webkit-autofill   -webkit-box-shadow  0 0 0px 1000px white inset  important    input focus -webkit-autofill   -webkit-box-shadow  0 0 0px 1000px white inset  important       You can use color  color to change the color

User · Answer

The following CSS removes the yellow background color and replaces it with a background color of your choosing   It doesn t disable auto-fill and it requires no jQuery or Javascript hacks   input -webkit-autofill       -webkit-box-shadow 0 0 0 50px white inset     Change the color to your own background color        -webkit-text-fill-color   333    input -webkit-autofill focus       -webkit-box-shadow    your box-shadow   0 0 0 50px white inset      -webkit-text-fill-color   333      Solution copied from  Override browser form-filling and input highlighting with HTML CSS

User · Answer

If you want to get rid of it entirely  I ve adjusted the code in the previous answers so it works on hover  active and focus too   input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill active  input -webkit-autofill focus       -webkit-box-shadow  0 0 0 1000px white inset

User · Answer

If you want to avoid the yellow flicker until your css is applied slap a transition on that bad boy like so    input -webkit-autofill       -webkit-box-shadow  0 0 0 1000px white inset  important      transition  background-color 10s ease-in-out 0s

User · Answer

Solution here   if  navigator userAgent toLowerCase   indexOf  chrome    gt   0          window  load function               input -webkit-autofill   each function                var text     this  val                var name     this  attr  name                  this  after this outerHTML  remove                   input name     name        val text

User · Answer

What about that solution   if    browser webkit          function             var inputs      input not  auto-complete-on              inputs attr  autocomplete    off             setTimeout function                 inputs attr  autocomplete    on               100               It turns off the auto-complete and auto-fill  so yellow backgrounds disappear   waits 100 milliseconds an then turns the auto-complete functionality back without auto-fill   If you have inputs that need to be auto-filled  then give them auto-complete-on css class

User · Answer

fareed namrouti answer is correct  But the background still get yellow when the input is selected  Adding  important fix the problem  If you want also textarea and select with the same behavior just add textarea -webkit-autofill  select -webkit-autofill  Only input  input -webkit-autofill       background-color  rgb 250  255  189   important      input  select  textarea  input -webkit-autofill  textarea -webkit-autofill  select -webkit-autofill       background-color  rgb 250  255  189   important

User · Answer

The final solution     document  ready function        var contadorInterval   0      if  navigator userAgent toLowerCase   indexOf  chrome    gt   0                var  interval   window setInterval function                          var autofills      input -webkit-autofill                if  autofills length  gt  0                                window clearInterval  interval      stop polling                 autofills each function                                         var clone     this  clone true  true                         this  after clone  remove                        setTimeout function                                  User   val                                  Password   val                            10                                                 contadorInterval                if contadorInterval  gt  50  window clearInterval  interval      stop polling            20        else          setTimeout function                      User   val                      Password   val                100

User · Answer

A combination of answers worked for me    lt style gt      input -webkit-autofill      input -webkit-autofill hover      input -webkit-autofill focus      input -webkit-autofill active           -webkit-box-shadow  0 0 0px 1000px  373e4a inset  important             -webkit-text-fill-color  white  important        lt  style gt

User · Answer

Just found myself with the same question   This works for me   form  focus     outline  none

User · Answer

A little bit hacky but works perfectly for me  input -webkit-autofill       -webkit-box-shadow  0 0 0px 1000px white inset

User · Answer

Here s the MooTools version of Jason s  Fixes it in Safari too   window addEvent  domready  function             username   focus         if   navigator userAgent toLowerCase   indexOf   chrome     gt   0    navigator userAgent toLowerCase   indexOf   safari     gt   0                  var  interval   window setInterval function                          var autofills       input -webkit-autofill                if  autofills length  gt  0                                 window clearInterval  interval      stop polling                 autofills each function el                                        var clone   el clone true true  inject el  after                         el dispose                                                 20

User · Answer

In your  tag  simply insert this small line of code    autocomplete  off    However  do not place this in the username email idname field because if you are still looking to use autocomplete  it will disable it for this field  But I found a way around this  simply place the code in your password input tag because you never autocomplete passwords anyways  This fix should remove the color force  matinain autocomplete ability on your email username field  and allows you to avoid bulky hacks like Jquery or javascript

User · Answer

If you want to preserve the autofill  as well as any data  attached handlers and functionality attached to your input elements  try this script   if  navigator userAgent toLowerCase   indexOf  chrome    gt   0        var  interval   window setInterval function                  var autofills      input -webkit-autofill            if  autofills length  gt  0                        window clearInterval  interval      stop polling             autofills each function                                 var clone     this  clone true  true                     this  after clone  remove                                     20       It polls until it finds any autofill elements  clones them including data and events  then inserts them into the DOM in the same location and removes the original  It stops polling once it finds any to clone since the autofill sometimes takes a second after page load  This is a variation of a previous code sample  but more robust and keeps as much functionality intact as possible    Confirmed working in Chrome  Firefox and IE 8

User · Answer

Change  white  to any color you want   input -webkit-autofill       -webkit-box-shadow  0 0 0 1000px white inset  important

User · Answer

Adding autocomplete  off  is not gonna cut it   Change input type attribute to type  search   Google doesn t apply auto-fill to inputs with a type of search   Hope this saves you some time

User · Answer

This helped me  a CSS only version   input -webkit-autofill       -webkit-box-shadow  0 0 0px 1000px white inset     where white can be any color you want

User · Answer

Try this code    x000D   x000D      function    x000D       setTimeout function    x000D            name user password    attr  type    password    x000D          1000   x000D          x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 10 0 jquery min js  gt  lt  script gt  x000D   lt input name  user password  type  password  gt  x000D   x000D   x000D

User · Answer

The only way that works for me was  jQuery required     document  ready function e        if    browser webkit                input id   val      val

User · Answer

lt input type  text  name  foo  autocomplete  off    gt    Similar Question  Link

User · Answer

Worked for me  only the css change required   input -webkit-autofill       -webkit-box-shadow  0 0 0px 1000px  ffffff inset important      you can put any color in place of  ffffff

[html] Google Chrome form autofill and its yellow background

Examples related to html

Examples related to css

Examples related to forms

Examples related to google-chrome

Examples related to autofill