Make it more obvious to tell which element is in focus when tabbing through elements

Question

In Firefox, there is a dotted border around an element when it has focus. I find this impossible to see sometimes. What, if any, Firefox setting can we use to make focus more obvious.

Note that I want to do this through a Firefox setting NOT by editing a website's CSS.

For example, in SuperUser, when the Questions, Tags, Users, Badges, or Unanswered buttons are in focus, the dotted border in completely invisible. How can I make the border, say, bring pink or red and 5px wide?

Currently, the Questions link is in focus. There is no way to tell that it's in focus from the website's color scheme.

I would rather it look like this when in focus, by changing some Firefox setting.

Answer 1

You can define your own default styles by adding them to <Firefox profile directory>\chrome\usercontent.css. Any changes you make will take effect the next time you launch the profile (so if you're using it at the time you edit that file, you'll have to restart).

By adding the following to my profile's usercontent.css:

:focus {
  outline: #FF5500 dashed 2px;
}

I get the following:

---

---

A few notes:

• usercontent.css only defines default styles that are used when no conflicting styles are defined in the web page. So, this works in cases where the focus outline is hidden for incidental reasons (such as the use of button images, as on this page), but it will not work if the website author has deliberately defined a CSS style that disables the focus outline, either for a given element or for the whole web page. It's widely considered bad practice to disable the focus outline without defining an alternative means of distinguishing the focused element, but unfortunately it's all too common.

• If you don't see a chrome subdirectory in the profile directory and/or you don't see a usercontent.css file within that subdirectory, simply create them.

• You can find the profile directory by entering about:support in the address bar (or selecting Troubleshooting Information from the Help menu), then clicking the Show Folder button in the Application Basics section.

Answer 2

You could use Stylish to set a different focus style. Something like this:

:focus {
    outline: 3px solid red;
}

The result would look like this: