Removing input background colour for Chrome autocomplete

Question

On a form I m working on  Chrome is auto-filling the email and password fields  This is fine  however  Chrome changes the background colour to a pale yellow colour   The design I m working on is using light text on a dark background  so this really messes up the look of the form - I have stark yellow boxes and near-invisible white text  Once the field is focused  the fields return to normal   Is it possible to stop Chrome changing the colour of these fields

User · Answer

If you want to keep the autocomplete functionality intact you can use a bit of jQuery to remove Chrome s styling  I wrote a short post about it here  http   www benjaminmiles com 2010 11 22 fixing-google-chromes-yellow-autocomplete-styles-with-jquery   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

It might be a little late but for future referent there is a CSS ONLY solution as Olly Hodgons shows here  http   lostmonocle com post 1479126030 fixing-the-chrome-autocomplete-background-colour  All you have to do is to add a further selector to overwrite the default input fields setting  So use instead of   input -webkit-autofill       background-color   FAFFBD  important      Somthing like    login input -webkit-autofill       background-color   ff00ff      or   form input -webkit-autofill       background-color   f0f      which seems to work fine with me

User · Answer

We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit  The default styling only affects the background color  but most other properties apply here  such as border and font-size  We can even change the color of the text using -webkit-text-fill-color which is included in the snippet below      Change Autocomplete styles in Chrome    input -webkit-autofill  input -webkit-autofill hover   input -webkit-autofill focus  textarea -webkit-autofill  textarea -webkit-autofill hover  textarea -webkit-autofill focus  select -webkit-autofill  select -webkit-autofill hover  select -webkit-autofill focus     border  1px solid green    -webkit-text-fill-color  green    -webkit-box-shadow  0 0 0px 1000px  000 inset    transition  background-color 5000s ease-in-out 0s

User · Answer

I ve got a solution if you want to prevent the autofill from google chrome but its a little bit  machete    just remove the class that google chrome adds to those inputs fields and set the value to    if you dont need to show store data after load     document  ready function          setTimeout function                  var data      input -webkit-autofill                data each function  i obj                  obj  removeClass  input -webkit-autofill                        obj value                             1

User · Answer

I have a pure CSS solution which uses CSS Filters   filter  grayscale 100   brightness 110      The grayscale filter replaces the yellow with grey  then the brightness removes the grey   SEE CODEPEN

User · Answer

input -webkit-autofill     border  none    border-radius   3rem    caret-color   fff     Pour le I quand on   dite      color   fff    background   292a2d       webkit autofill      -webkit-text-fill-color   fff     Surcharge la font color d autofill      -webkit-background-clip  text     Supprime le background autofill  utile pour le border radius      box-shadow  0 0 0 50px  292a2d inset     Ajoute un fake background    base d ombrage aplatit

User · Answer

I have a better solution   Setting the background to another color like below didn t solve the problem for me because I needed a transparent input field  -webkit-box-shadow  0 0 0px 1000px white inset    So I tried some other things and I came up with this   input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active       transition  background-color 5000s ease-in-out 0s

User · Answer

None of the solutions worked for me  the inset shadow won t work for me because the inputs have a translucent background overlaid over the page 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 at all   After the page loads  with javascript you can either dynamically 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 is broken   Crazy hack  I know  But it s working for me   Chrome 34 0 1847 116  OSX 10 7 5

User · Answer

This will work for input  textarea and select in normal  hover  focus and active states    input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active  textarea -webkit-autofill  textarea -webkit-autofill hover  textarea -webkit-autofill focus  textarea -webkit-autofill active  select -webkit-autofill  select -webkit-autofill hover  select -webkit-autofill focus  select -webkit-autofill active        -webkit-box-shadow  0 0 0px 1000px white inset  important      Here is SCSS version of the above solution for those who are working with SASS SCSS   input -webkit-autofill  textarea -webkit-autofill  select -webkit-autofill        amp    amp  hover   amp  focus   amp  active               -webkit-box-shadow  0 0 0px 1000px white inset  important

User · Answer

Adding one hour delay would pause any css changes on the input element   This is more better rather than adding transition animation or inner shadow   input -webkit-autofill  textarea -webkit-autofill  select -webkit-autofill    transition-delay  3600s

User · Answer

As mentioned before  inset -webkit-box-shadow for me works best      Code witch overwrites input background-color    input -webkit-autofill        -webkit-box-shadow  0 0 0px 1000px  fbfbfb inset      Also code snippet to change text color   input -webkit-autofill first-line        color   797979

User · Answer

All of the above answers worked but did have their faults  The below code is an amalgamation of two of the above answers that works flawlessly with no blinking   input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active       transition  background-color 5000s ease-in-out 0s      -webkit-box-shadow  0 0 0px 1000px  fff inset

User · Answer

This worked for me   padding  5px  background-clip  content-box

User · Answer

This is my solution  I used transition and transition delay therefore I can have a transparent background on my input fields    input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active       -webkit-transition   color 9999s ease-out  background-color 9999s ease-out       -webkit-transition-delay  9999s

User · Answer

use this and check your problem issue is resolved    lt input type  email  id  email  name  email  class  form-control validate  onfocus  this removeAttribute  readonly     readonly gt

User · Answer

SASS  input -webkit-autofill     amp      amp  hover     amp  focus     amp  active     transition-delay  9999s     transition-property  background-color  color

User · Answer

To have a transparent background while not using a time delay  especially needed in modern web applications where people can stop using it for a while and want a predictable behavior of the interface   use this  input -webkit-autofill        -webkit-background-clip  text      x000D   x000D  body     background  lightblue     input     background  transparent     input no-autofill-bkg -webkit-autofill     -webkit-background-clip  text    x000D   lt input type  text  name  email    gt   lt input type  text  name  email  class  no-autofill-bkg    gt  x000D   x000D   x000D   Working on  Chrome 83   84 0 4147 89  Edge 84 0 522 44 If you decide to re-post my solution  I only ask that you include my name or link to this

User · Answer

and this worked for me  Chrome 76 tested   input -internal-autofill-selected       background-color  transparent

User · Answer

The previous solutions of adding a box-shadow works well for people who need a solid colour background  The other solution of adding a transition works  but having to set a duration delay will mean that at some point it may show again   My solution is to use keyframes instead  that way it will always show the colours of your choosing    -webkit-keyframes autofill       0  100            color   666          background  transparent           input -webkit-autofill       -webkit-animation-delay  1s     Safari support - any positive time runs instantly        -webkit-animation-name  autofill      -webkit-animation-fill-mode  both      Example Codepen  https   codepen io -Steve- pen dwgxPB

User · Answer

Unfortunately strictly none of the above solutions worked for me in 2016  a couple years after the question   So here s the aggressive solution I use   function remake e       var val   e value      var id   e id      e outerHTML   e outerHTML      document getElementById id  value   val      return true      lt input id MustHaveAnId type text name email autocomplete on onblur  remake this   gt    Basically  it deletes the tag while saving the value  and recreates it  then puts back the value

User · Answer

I had an issue where I couldn t use box-shadow because I needed the input field to be transparent  It s a bit of a hack but pure CSS  Set the transition to a very long amount of time    input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active   transition  background-color 50000s ease-in-out 0s  color 5000s ease-in-out 0s

User · Answer

After 2 hours of searching it seems google still overrides the yellow color somehow but i for the fix for it  That s right  it will work for hover  focus etc as well  all you have to do is add  important to it    input -webkit-autofill   input -webkit-autofill hover   input -webkit-autofill focus   input -webkit-autofill active    -webkit-box-shadow  0 0 0px 1000px white inset  important        this will completely remove yellow from input fields

User · Answer

This works for me    input -webkit-autofill  transition  background-color 5000s ease-in-out 0s

User · Answer

Simple  just add       autocomplete  new-password    to the password field

User · Answer

Although solutions that can be found in many answers do work in Chrome  they do not work in Safari for Mac and iOS   Safari requires an additional statement     background-clip   This is the full code for a solution that works across all major browsers on different platforms      Disable autofill highlighting    input -webkit-autofill      -webkit-text-fill-color  var --text-input-color   important    -webkit-box-shadow  0 0 0 1rem var --page-background-color  inset  important    background-clip  content-box  important       Please change the --text-input-color and --page-background-color with your own values

User · Answer

Try this    Same as  Nathan-white answer above with minor tweaks      For removing autocomplete highlight color in chrome  note  use this at bottom of your css file       input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active       transition  all 5000s ease-in-out 0s      transition-property  background-color  color

User · Answer

I give up   Since there is no way to change the color of the input with autocomplete I decide to disable all of them with jQuery for webkit browsers  Like this   if   webkit  test navigator userAgent toLowerCase               autocomplete  on     each function               this  attr  autocomplete    off

User · Answer

In addition to this   input -webkit-autofill  -webkit-box-shadow  0 0 0px 1000px white inset      You might also want to add  input -webkit-autofill focus  -webkit-box-shadow  0 0 0px 1000px white inset  0 0 8px rgba 82  168  236  0 6       Other wise  when you click on the input  the yellow color will come back   For the focus  if you are using bootstrap  the second part is for the border highlighting  0 0 8px rgba 82  168  236  0 6     Such that it will just look like any bootstrap input

User · Answer

This has been as designed since this coloring behavior has been from WebKit  It allows the user to understand the data has been prefilled  Bug 1334  You could turn off autocomplete by doing  or on the specific form control    lt form autocomplete  off  gt       lt  form   Or you can change the colour of the autofill by doing   input -webkit-autofill       color   2a2a2a  important      Note  there is a bug being tracked for this to work again  http   code google com p chromium issues detail id 46543  This is a WebKit behavior

User · Answer

i use this  work for me  remove yellow background of field   input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active  input -webkit-autofill valid  select -webkit-autofill  select -webkit-autofill hover  select -webkit-autofill focus       -webkit-transition-delay  99999s      -webkit-text-fill-color  D7D8CE

User · Answer

The solution of Daniel Fairweather  Removing input background colour for Chrome autocomplete    I would love to upvote his solution  but still need 15 rep  works really good  There is a really huge difference with most upvoted solution   you can keep background images   But a little modification  just Chrome check   And you need to keep in mind  it ONLY works on visible fields     So you if you are using   show   for your form  you need to run this code After show   event  My full solution  I have a show hide buttons for login form       if   self isLoginVisible              var container       loginpage            container stop            self isLoginVisible true           if  navigator userAgent toLowerCase   indexOf  chrome    gt   0                 var documentForms   document forms              for  i   0  i  lt  documentForms length  i                      for  j   0  j  lt  documentForms i  elements length  j                          var input   documentForms i  elements j                        if  input type     text     input type     password     input type    null                            var text   input value                          input focus                            var event   document createEvent  TextEvent                            event initTextEvent  textInput   true  true  window   a                            input dispatchEvent event                           input value   text                          input blur                                                                           else           self hideLogon            Sorry again  I would prefer it to be a comment    If you want  I can put a link to the site where I used it

User · Answer

Thanks Benjamin    The Mootools solution is a little more tricky  as I can t get fields by using     input -webkit-autofill    So what I ve used is the following   if  navigator userAgent toLowerCase   indexOf  chrome    gt   0       window addEvent  load   function         setTimeout clearWebkitBg  20       var elems   getElems        for  var i   0  i  lt  elems length  i              elems i   addEvent  blur   clearWebkitBg                 function clearWebkitBg        var elems   getElems      for  var i   0  i  lt  elems length  i          var oldInput     elems i        var newInput   new Element  input            name   oldInput get  name           id   oldInput get  id           type   oldInput get  type           class   oldInput get  class           value   oldInput get  value               var container   oldInput getParent        oldInput destroy        container adopt newInput         function getElems       return   pass    login       ids

User · Answer

Google Chrome user agent prevent developers  CSS  So for changing autofill UI must use another property like these   input -webkit-autofill  textarea -webkit-autofill  select -webkit-autofill       -webkit-box-shadow  0 0 0 1000px  d500ff inset  important        use inset box-shadow to cover background-color       -webkit-text-fill-color   ffa400  important        use text fill color to cover font color

User · Answer

try this for hide autofill style  input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill active  input -webkit-autofill focus       background-color   FFFFFF  important      color   555  important      -webkit-box-shadow  0 0 0 1000px white inset  important      -webkit-text-fill-color   555555  important

User · Answer

I have developed another solution using JavaScript without JQuery  If you find this useful or decide to re-post my solution  I only ask that you include my name  Enjoy      Daniel Fairweather  var documentForms   document forms   for i   0  i  lt  documentForms length  i         for j   0  j  lt  documentForms i  elements length  j             var input   documentForms i  elements j            if input type     text     input type     password     input type    null               var text   input value              input focus                var event   document createEvent  TextEvent                event initTextEvent  textInput   true  true  window   a                input dispatchEvent event               input value   text              input blur                        This code is based on the fact that Google Chrome removes the Webkit style as soon as additional text is entered  Simply changing the input field value does not suffice  Chrome wants an event  By focusing on each input field  text  password   we can send a keyboard event  the letter  a   and then set the text value to it s previous state  the auto-filled text   Keep in mind that this code will run in every browser and will check every input field within the webpage  adjust it accordingly to your needs

User · Answer

A possible workaround for the moment is to set a  strong  inside shadow   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

User · Answer

resurrection of thread at two years later  im working around this issue about days and found a simple trick for the prevent this ugly autocomplete feature   just add a random string to form target like  lt form action  site com login php random 123213  gt   it works on recent chrome version 34 0 1847 137  update  if it does not work  give strange protocol to action like   lt form id  test  action  xxx     gt  and fill this area later with javascript       test   attr  action    http   example site login php      update 2  still having issues with that  i decided to completely remove the  lt form gt  tag and post variables via jquery  its more easy

User · Answer

You can change input box styles as well as text styles inside input box  Here you can use any color e g  white   DDD  rgba 102  163  177  0 45   But transparent won t work here     Change the white to any color    input -webkit-autofill  input -webkit-autofill hover   input -webkit-autofill focus   input -webkit-autofill active    -webkit-box-shadow  0 0 0 30px white inset  important     Additionally  you can use this to change the text color    Change text in autofill textbox   input -webkit-autofill    -webkit-text-fill-color  yellow  important     Advice  Don t use an excessive blur radius in the hundreds or thousands  This has no benefit and might put processor load on weaker mobile devices   Also true for actual  outside shadows   For a normal input box of 20px height  30px    blur radius    will perfectly cover it

User · Answer

This is complex solution for this task    x000D   x000D   function     x000D      if  navigator userAgent toLowerCase   indexOf  chrome    gt   0    x000D            input  select   on  change focus   function  e    x000D              setTimeout function      x000D                    each  x000D                      document querySelectorAll    -webkit-autofill    x000D                      function      x000D                          var clone     this  clone true  true   x000D                            this  after clone  remove    x000D                          updateActions    x000D                         x000D                 300  x000D             change    x000D        x000D      var updateActions   function        method for update input actions x000D      updateActions       start on load and on rebuild x000D     jQuery  x000D    -webkit-autofill  x000D    -webkit-autofill hover  x000D    -webkit-autofill focus  x000D    -webkit-autofill active   x000D         use animation hack  if you have hard styled input    x000D      transition  all 5000s ease-in-out 0s  x000D      transition-property  background-color  color  x000D         if input has one color  and didn t have bg-image use shadow    x000D      -webkit-box-shadow  0 0 0 1000px  fff inset  x000D         text color    x000D      -webkit-text-fill-color   fff  x000D         font weigth    x000D      font-weight  300 important  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  text  name  name  autocomplete  name   gt  x000D   lt input type  email  name  email  autocomplete  email   gt  x000D   x000D   x000D

User · Answer

For those who are using Compass    each  prefix in -webkit  -moz        include with-prefix  prefix             each  element in input  textarea  select                  element     prefix -autofill                    include single-box-shadow 0  0  0  1000px   white  inset

[autocomplete] Removing input background colour for Chrome autocomplete?

Examples related to autocomplete

Examples related to input

Examples related to google-chrome