Make the highlight bold when tabbing through items on page instead of tiny faint dotted line
When you tab around within a page (i.e. with the Tab key) and things such as links get highlighted they are only indicated with an extremely thin faint dotted line. Is there a way to make the highlighting more prominent such as a thicker line or light shading of the boxed-in area?
I don't even know what words to use for this in order to search for an add-on. What do you call it when you click on Tab to move the selection from one item on a page to the next? Highlighting? I don't think it's the cursor because the cursor is for typing words, right? I'm not talking about switching from one page or FF tab to another. I'm talking about when you move the selection (??) from one link to the next within a single page and then you can hit Enter which is like clicking on the highlighted link.
All Replies (6)
You can apply custom style rules to web pages in Firefox using either an add-on such as the Stylish extension or by creating/editing a userContent.css file.
When a link is selected by tabbing, it has the focus, so you can modify the styling of focused links with a rule such as the following (example screen shot attached):
a:focus {
outline-width: 2px !important; /* thicker line */
outline-offset: 2px !important; /* more space inside */
color: #000 !important; /* black text */
background-color: #ffc !important; /* pale yellow */
}
Of course, there may be other elements besides links you want to style, or you might prefer to change the style of the outline or its color instead of modifying the text and background colors. I guess the message of this post is: it's possible, but someone will need to do a little further work to code it up and explain how to implement it.
You can set the browser.display.focus_ring_width pref to a higher value (default is 1) on the about:config page.
Modified by cor-el
Wow, thanks cor-el. There seems to be an endless list of things to learn about Firefox. This one might also be useful for higher widths:
browser.display.focus_ring_style
- 1 = dotted line (default)
- 0 = solid line
Great, thanks. The value must be 4 or under although this is not mentioned in the documentation. I found this by trial and error. About:config will let you enter 5 or higher but if you do, the value is ignored and the focus ring will be 1 pixel wide.
I wouldn't want much more than 4 but it would be good to try out 5 or 6 or so to see if it's better.
I will probably change other things mentioned in the links such as focus background color - my goal here is to make it easier to change the focus on a page without using a mouse (power user style).
However that is often impossible because the focus is often impossible to see. This happens when it jumps to some tiny element, or off the viewable screen, or gets stolen by some element and is frozen there.
BTW in case anyone's interested there are many sites out there where viewing the focus is not merely difficult but impossible with the default focus ring width, because the focus ring is completely invisible.
e.g. http://www.movingimage.us/films/
At non-default focus ring widths, focus becomes visible.
A programmer friend says this is due to the "horrible" coding of the page - which may be true but if so, a large proportion of sites out there are also horribly designed!
1539 if ((NS_SUCCEEDED(result) && focusRingWidth != 1 && focusRingWidth <= 4 ) || focusRingOnAnything) {