This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Big yellow dotted border on history page.

  • 6 replies
  • 1 has this problem
  • 1 view
  • Last reply by thor94

more options

I don't know if it is a wrong manipulation or an update feature, but since today when i select a link in the history library, it is now highlighted with big yellow dotted borders instead of the usual subtle black/white single pixel sized dots. How to revert back to the small borders?

I don't know if it is a wrong manipulation or an update feature, but since today when i select a link in the history library, it is now highlighted with big yellow dotted borders instead of the usual subtle black/white single pixel sized dots. How to revert back to the small borders?
Attached screenshots

Chosen solution

This code in userChrome.css should do that.

*|*:root {
 --default-focusring-width: 1px !important;
}

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

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 userChrome.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 userChrome.css file.

See also: More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-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.

Read this answer in context 👍 0

All Replies (6)

more options

I think that they have increased the focus outline from 1px to 2px, possibly only if you use a high contrast theme.

See --default-focusring

--default-focusring-width: 2px;
--default-focusring: var(--default-focusring-width) dotted;

  • 1749712 - Make dotted focus rings 2px wide by default

(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html
)

Modified by cor-el

more options

the problem, is i use a pretty light theme (mars picture), but white text is more visible on the pastel brown/orange sky, the dark mode is forced because FF96+ saying white text means obviously dark mode (despite all light pastel themes also use white text)

So how to force the outline back to 1px? yellow 2px dots is damn ugly

more options

Chosen Solution

This code in userChrome.css should do that.

*|*:root {
 --default-focusring-width: 1px !important;
}

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

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 userChrome.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 userChrome.css file.

See also: More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-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.

more options

it doesn't work. I have always the big 2px sized outline

more options

Did you make sure that you enabled userChrome.css via the pref I mentioned above ?

  • about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true

Is userChrome.css placed in the chrome folder in the current profile folder and that userChrome.css doesn't have a hidden .txt file extension (userChrome.css.txt; i.e. it isn't a Text File) ?

Can you attach screenshots that show the location and the content of ?

more options

yep i forgotten about the config, thks. The pixel returned to normal.