Override browser form-filling and input highlighting with HTML CSS

Question

I have 2 basic forms -- sign in and sign up  both on the same page  Now  I have no problem with the sign in form auto-filling  but the sign up form auto fills as well  and I don t like it   Also  the form styles get a yellow background which I can t manage to override and I don t want to use inline CSS to do so  What can I do to make them stop being colored yellow and  possibly  auto filling  Thanks in advance

User · Answer

Sometimes autocomplete on the browser still autocompletes when you just have the code in the <form> element.

I tried putting it in the <input> element as well and it worked better.

<form autocomplete="off">  AND  <input autocomplete="off">

Support for this attribute however is ceasing, please read https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Another work around that I've found is taking out placeholders inside of the input fields that suggest that it is an email, username, or phone field (ie. "Your Email", "Email", etc.")

enter image description here

This makes it so that browsers don't know what kind of field it is, thus doesn't try to autocomplete it.

User · Answer

for the autocompletion  you can use    lt form autocomplete  off  gt    regarding the coloring-problem   from your screenshot i can see that webkit generates the following style   input -webkit-autofill       background-color   FAFFBD  important      1  as  id-styles are even more important than  class styles  the following may work    inputId -webkit-autofill       background-color  white  important      2  if that won t work  you can try to set the style via javascript programmatically      input type  text     bind  focus   function          this  css  background-color    white          3  if that won t work  you re doomed  -  consider this  this wont hide the yellow color  but will make the text readable again   input -webkit-autofill           color   2a2a2a  important           4  a css javascript solution   css   input focus       background-position  0 0      and the following javascript has to be run onload   function loadPage         if  document login   if the form login exists  focus                document login name focus     the username input         document login pass focus     the password input         document login login focus     the login button  submitbutton            eg    lt body onload  loadPage     gt    good luck  -   5  If none of the above work try removing the input elements  cloning them  then placing the cloned elements back on the page  works on Safari 6 0 3     lt script gt  function loadPage         var e   document getElementById  id email        var ep   e parentNode      ep removeChild e       var e2   e cloneNode        ep appendChild e2        var p   document getElementById  id password        var pp   p parentNode      pp removeChild p       var p2   p cloneNode        pp appendChild p2      document body onload   loadPage   lt  script gt    6  From 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

The REAL problem here is that Webkit  Safari  Chrome       has a bug  When there s more than one  form  on the page  each with an  input type  text  name  foo        i e  with the same value for the attribute  name    then when the user returns to the page the autofill will be done in the input field of the FIRST  form  on the page  not in the  form  that was sent  The second time  the NEXT  form  will be autofilled  and so on  Only  form  with an input text field with the SAME name will be affected   This should be reported to the Webkit developers   Opera autofills the right  form    Firefox and IE doesn t autofill   So  I say again  this is a bug in Webkit

User · Answer

After trying a lot of things  I found working solutions that nuked the autofilled fields and replaced them with duplicated  Not to loose attached events  i came up with another  a bit lengthy  solution   At each  input  event it swiftly attaches  change  events to all involved inputs  It tests if they have been autofilled  If yes  then dispatch a new text event that will trick the browser to think that the value has been changed by the user  thus allowing to remove the yellow background   var initialFocusedElement   null      inputs      input type  text       var removeAutofillStyle   function       if   this  is   -webkit-autofill          var val   this value          Remove change event  we won t need it until next  input  event        this  off  change            Dispatch a text event on the input field to trick the browser     this focus        event   document createEvent  TextEvent        event initTextEvent  textInput   true  true  window            this dispatchEvent event           Now the value has an asterisk appended  so restore it to the original     this value   val          Always turn focus back to the element that received         input that caused autofill     initialFocusedElement focus            var onChange   function          Testing if element has been autofilled doesn t       work directly on change event    var self   this    setTimeout function         removeAutofillStyle call self        1        inputs on  input   function       if this     document activeElement        initialFocusedElement   this          Autofilling will cause  change  event to be         fired  so look for it      inputs on  change   onChange

User · Answer

The form element has an autocomplete attribute that you can set to off  As of the CSS the  important directive after a property keeps it from being overriden   background-color  white  important    Only IE6 doesn t understand it   If I misunderstood you  there s also the outline property that you could find useful

User · Answer

You can disable auto-completion as of HTML5  via autocomplete  off    but you CAN T override the browser s highlighting  You could try messing with   selection in CSS  most browsers require a vendor prefix for that to work   but that probably won t help you either   Unless the browser vendor specifically implemented a vendor-specific way of overriding it  you can t do anything about such styles that are already intended to override the site s stylesheet for the user  These are usually applied after your stylesheets are applied and ignore   important overrides  too

User · Answer

You can also change the name attribute of your form elements to be something generated so that the browser won t keep track of it  HOWEVER firefox 2 x  and google chrome seems to not have much problems with that if the request url is identical  Try basically adding a salt request param and a salt field name for the sign-up form   However I think autocomplete  off  is still top solution

User · Answer

I ve read so many threads and try so many pieces of code  After gathering all that stuff  the only way I found to cleanly empty the login and password fields and reset their background to white was the following      window  load function         setTimeout function                input -webkit-autofill                val                  css  -webkit-box-shadow    0 0 0px 1000px white inset                attr  readonly   true               removeAttr  readonly                    50         Feel free to comment  I m opened to all enhancements if you find some

User · Answer

Add this CSS rule  and yellow background color will disapear      input -webkit-autofill       -webkit-box-shadow  0 0 0px 1000px white inset

User · Answer

Why not just put this in your css   input --webkit-autocomplete     color  inherit    background  inherit    border  inherit      That should take care of your issue  Although it does raise a usability issue because now the user can t see that the form was autofilled in the way he she is used to    edit  After posting this I saw that a similar answer was already given and that you commented on it that it didn t work  I don t quite see why because it did work when I tested it

User · Answer

lt form autocomplete  off  gt    Pretty much all modern browsers will respect that

User · Answer

Since the browser searches for password type fields  another workaround is to include a hidden field at the beginning of your form    lt  -- unused field to stop browsers from overriding form style -- gt   lt input type  password  style    display none    gt

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

Simple javascript solution for all browser   setTimeout function             parent input   each function            parent     this  parents   parent              this  clone   appendTo parent                this  attr  id      attr  name      hide                300      Clone input  reset attribute and hide original input  Timeout is needed for iPad

User · Answer

This seems to be working for me   x000D   x000D  input     -webkit-background-clip  text  important    x000D   x000D   x000D

User · Answer

I ve seen Google toolbar s autocomplete feature disabled with javascript  It might work with some other autofill tools  I don t know if it ll help with browsers built in autocomplete    lt script type  text javascript  gt  lt  --   if window attachEvent      window attachEvent  onload  setListeners      function setListeners        inputList   document getElementsByTagName  INPUT        for i 0 i lt inputList length i           inputList i  attachEvent  onpropertychange  restoreStyles         inputList i  style backgroundColor                 selectList   document getElementsByTagName  SELECT        for i 0 i lt selectList length i           selectList i  attachEvent  onpropertychange  restoreStyles         selectList i  style backgroundColor                    function restoreStyles        if event srcElement style backgroundColor              event srcElement style backgroundColor            -- gt   lt  script gt

User · Answer

If it s in input field you re trying to  un-yellow        Set a background-color with css    let s say  ccc  light gray   Add value  sometext   which temporary fills the field with  sometext   optional  Add a little javascript to make the  sometext  clear when you go to put the real text in    So  it might look like this    lt input id  login  style  background-color   ccc   value  username      onblur  if this value      this value  username         onfocus  if this value   username   this value        gt

User · Answer

I had to also change the text color to something darker  see StackOverflow dark theme colors    So ended up with a hybrid of  Tam  s Pap   MCBL and  don s solution   input -webkit-autofill  input -webkit-autofill hover  input -webkit-autofill focus  input -webkit-autofill active       -webkit-box-shadow  0 0 0px 1000px  2d2d2d inset  important      -webkit-text-stroke-color   e7e8eb  important      -webkit-text-fill-color   e7e8eb  important

User · Answer

After 2 hours of searching it seems Google Chrome still overrides the yellow color somehow  but I found the fix  It will work for hover  focus etc  as well  All you have to do is to 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 color from input fields

User · Answer

Trick it with 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  0 0 0 50px white inset   your box-shadow       -webkit-text-fill-color   333

User · Answer

Please try with autocomplete  none  in your input tag    This works for me

User · Answer

The screenshot you linked to says that WebKit is using the selector input -webkit-autofill for those elements  Have you tried putting this in your CSS   input -webkit-autofill       background-color  white  important      If that doesn t work  then nothing probably will  Those fields are highlighted to alert the user that they have been autofilled with private information  such as the user s home address  and it could be argued that allowing a page to hide that is allowing a security risk

User · Answer

Autocomplete off is not supported by modern browsers  The easiest way to solve autocomplete I found was a little track with HTML and JS  The first thing to do is change the type of the input in HTML from  password  to  text     lt input class  input input-xxl input-watery  type  text  name  password   gt    Autocomplete starts after window loaded  That s OK  But when the type of your field is not  password   browser didn t know what fields it must complete  So  there will be no autocomplete on form fields   After that  bind event focusin to password field  for ex  in Backbone    focusin input name password     onInputPasswordFocusIn     In onInputPasswordFocusIn  just change the type of your field to password  by simple check   if  e currentTarget value                 e currentTarget  attr  type    password        That s it    UPD  this thing doesn t work with disabled JavaSciprt  UPD in 2018  Also found some funny trick  Set readonly attribute to the input field  and remove it on the focus event  First prevent browser from autofilling fields  second will allow to input data

[html] Override browser form-filling and input highlighting with HTML/CSS

Examples related to html

Examples related to css

Examples related to input

Examples related to autofill