X
Tap here to go to the mobile version of the site.

Support Forum

Get rid of yellow form field background / Password not displayed in the form fields

Posted

Since I upgraded to FF68esr form fields have a yellow background. I've looked in the group policy, about:config and can't find anything. I found a couple of css suggestions neither of which got rid of the yellow. I just want to have firefox work how it used to instead of all these constant changes that break or degrade the experience.

Is there a way to disable this annoying "feature"?

Also, since upgrading, sites that cached my userid and password no longer show the password and enable me to single click login. I have to select the user name field, press tab, then the password is added and then I can log in. Is there a way to revert that behavior too?

I posted many weeks ago about how slow v68 is to load themes. The CSS that I used in v60 was speedy enough, but in v68 it's really slow, showing a bright blue background for a second or two before loading the theme. Is there a way to fix that in v68. I think someone said themes are going to be phased out too... is that true? Firefox looks really unattractive without something improve the UI.

Since I upgraded to FF68esr form fields have a yellow background. I've looked in the group policy, about:config and can't find anything. I found a couple of css suggestions neither of which got rid of the yellow. I just want to have firefox work how it used to instead of all these constant changes that break or degrade the experience. Is there a way to disable this annoying "feature"? Also, since upgrading, sites that cached my userid and password no longer show the password and enable me to single click login. I have to select the user name field, press tab, then the password is added and then I can log in. Is there a way to revert that behavior too? I posted many weeks ago about how slow v68 is to load themes. The CSS that I used in v60 was speedy enough, but in v68 it's really slow, showing a bright blue background for a second or two before loading the theme. Is there a way to fix that in v68. I think someone said themes are going to be phased out too... is that true? Firefox looks really unattractive without something improve the UI.

Modified by TanyaC

Quote

Additional System Details

Installed Plug-ins

Disconnect, ublock origin, reload in address bar, newtabhomepage

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

More Information

cor-el
  • Top 10 Contributor
  • Moderator
17865 solutions 161655 answers

The yellow background is only shown when Firefox his filled the field automatically to make you aware that you have entered data in a form field that a script running on the page can read or that might be submitted.

It is about this CSS code:

Some possible code for userContent.css

Add code to the userContent.css file.


/* Remove color effect filter on autofilled fields */
:-moz-autofill {filter: unset !important;}

/* Remove filter on all fields */
input {filter: unset !important;}

See also:

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

The yellow background is only shown when Firefox his filled the field automatically to make you aware that you have entered data in a form field that a script running on the page can read or that might be submitted. It is about this CSS code: *https://dxr.mozilla.org/mozilla-release/source/layout/style/res/forms.css#1096 Some possible code for userContent.css Add code to the <b>userContent.css</b> file. <hr> <pre><nowiki>/* Remove color effect filter on autofilled fields */ :-moz-autofill {filter: unset !important;} /* Remove filter on all fields */ input {filter: unset !important;}</nowiki></pre> ---- See also: *https://www.userchrome.org/what-is-userchrome-css.html *https://www.userchrome.org/how-create-userchrome-css.html In Firefox 69 and later you need to set this pref to true on the <b>about:config</b> page to enable userChrome.css and userContent.css in the chrome folder. *toolkit.legacyUserProfileCustomizations.stylesheets = true See: *https://www.userchrome.org/firefox-changes-userchrome-css.html
Was this helpful to you?
Quote

Question owner

I had tried both of those, but not together. I shall see if they work together.

I'm using 68esr so won't be moving until the next esr release.

Thanks for the explanation. I understand why they might have implemented it. Developers always have a reason, just often people don't like the changes. For me, it adds no value and just looks bad.

I assume the about:config change in v69 is also supported in group policy?

As long as I can keep undoing these UI changes that occur with every release I'm a happy camper.

UPDATE: oooh, so close :)

The other issue I mentioned was that I now have to click on the username field, then press tab to get the password to show so that I can sign in (I'm using eBay as the example here). Whereas the v60esr behavior was that both fields were prefilled and all I had to do was click on Log In.

As soon as I press tab the yellow fill comes back on both form fields.

I had tried both of those, but not together. I shall see if they work together. I'm using 68esr so won't be moving until the next esr release. Thanks for the explanation. I understand why they might have implemented it. Developers always have a reason, just often people don't like the changes. For me, it adds no value and just looks bad. I assume the about:config change in v69 is also supported in group policy? As long as I can keep undoing these UI changes that occur with every release I'm a happy camper. UPDATE: oooh, so close :) The other issue I mentioned was that I now have to click on the username field, then press tab to get the password to show so that I can sign in (I'm using eBay as the example here). Whereas the v60esr behavior was that both fields were prefilled and all I had to do was click on Log In. As soon as I press tab the yellow fill comes back on both form fields.

Modified by TanyaC

Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17865 solutions 161655 answers

There is a checkbox for autofill logins and passwords available in Options/Preferences.

  • Options/Preferences -> Privacy & Security: Logins and Passwords: "Saved Logins"

It is meant to use either of these. The first rule only removes the highlight in fields that are filled automatically. The second rule removes the highlight from all input fields.

Did you make sure userContent.css doesn't have a hidden .txt file extension (i,e. is a CSS file and not a Text file) and that the file is located in the chrome folder in the profile folder ?

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userContent.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.


This is the correct link for the 68 ESR branch for forms.css:

There is a checkbox for autofill logins and passwords available in Options/Preferences. *Options/Preferences -> Privacy & Security: Logins and Passwords: "Saved Logins" *https://support.mozilla.org/en-US/kb/password-manager-remember-delete-change-and-import It is meant to use either of these. The first rule only removes the highlight in fields that are filled automatically. The second rule removes the highlight from all input fields. Did you make sure userContent.css doesn't have a hidden .txt file extension (i,e. is a CSS file and not a Text file) and that the file is located in the chrome folder in the profile folder ? In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named <i>userContent.css.txt</i>. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as". You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file. ----- This is the correct link for the 68 ESR branch for forms.css: *https://dxr.mozilla.org/mozilla-esr68/source/layout/style/res/forms.css *https://dxr.mozilla.org/mozilla-esr68/search?q=regexp:moz-autofill
Was this helpful to you?
Quote

Question owner

1. Yes, the "Auto-fill logins and password" is checked. It does not auto-fill the password until I click on the login field then press tab.

2. Yes, the file is correctly named and in the correct location. The file has other code for the ..., using curved tabs and reverting a whole bunch of other changes that occurred when Quantum was released, which work fine.

3. When I open the site it definitely has removed the yellow auto-fill. It's only once the password is provided that it reverts to the yellow auto-fill

4. I always have firefox closed when editing a css file.

5. The password manager you linked to refers to firefox v70 and above. I assume that v68esr does not have this implemented?

6. I don't understand what the results mean, or what I'm looking for in the last two links you supplied.

1. Yes, the "Auto-fill logins and password" is checked. It does not auto-fill the password until I click on the login field then press tab. 2. Yes, the file is correctly named and in the correct location. The file has other code for the ..., using curved tabs and reverting a whole bunch of other changes that occurred when Quantum was released, which work fine. 3. When I open the site it definitely has removed the yellow auto-fill. It's only once the password is provided that it reverts to the yellow auto-fill 4. I always have firefox closed when editing a css file. 5. The password manager you linked to refers to firefox v70 and above. I assume that v68esr does not have this implemented? 6. I don't understand what the results mean, or what I'm looking for in the last two links you supplied.

Modified by TanyaC

Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17865 solutions 161655 answers

Code for curved tabs would go in userChrome.css as this file is for styling the user interface (aka chrome). This code is for styling web pages and that code needs to be in a different file named userContent.css.

Code for curved tabs would go in userChrome.css as this file is for styling the user interface (aka chrome). This code is for styling web pages and that code needs to be in a different file named <b>userContent.css</b>.
Was this helpful to you?
Quote

Question owner

oops. I'll fix and get back to you

oops. I'll fix and get back to you
Was this helpful to you?
Quote

Question owner

Yes, putting the code in userContent.css does indeed solve the problem of the form field reverting to yellow.

Getting there :)

I still have to click login, press tab and then Sign In. v60: One action; v68: Three actions. Yup. That's more productive. Good move ;)

Sorry, forgive the sarcasm.

Yes, putting the code in userContent.css does indeed solve the problem of the form field reverting to yellow. Getting there :) I still have to click login, press tab and then Sign In. v60: One action; v68: Three actions. Yup. That's more productive. Good move ;) Sorry, forgive the sarcasm.
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.