Get rid of yellow form field background / Password not displayed in the form fields
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.
Okulungisiwe ngu TanyaC
All Replies (7)
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:
- 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 about:config page to enable userChrome.css and userContent.css in the chrome folder.
- toolkit.legacyUserProfileCustomizations.stylesheets = true
See:
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.
Okulungisiwe ngu TanyaC
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:
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.
Okulungisiwe ngu TanyaC
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.
oops. I'll fix and get back to you
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.