Why no Support Information about the browser.display.focus_ring_style entry in the config file? Why can't I change the focus ring color via the config file?
Currently using Ver38. Used to able change the focus ring color & style vis css to aid seeing which link has focus. Methods via 'about:config' to alter any focus ring parameters are too restrictive. Unable to find any info on the config file entry of 'browser.display.focus_ring_style.
Chosen solution
That code needs to be in the userContent.css file.
Read this answer in context 👍 0All Replies (8)
I used the source code search site and discovered this (two comment lines followed by the line setting the default value):
// focus ring border style. // 0 = solid border, 1 = dotted border pref("browser.display.focus_ring_style", 1);
https://dxr.mozilla.org/mozilla-central/source/modules/libpref/init/all.js#228
Hi jscher2000 Thanks for the info & the prompt reply. However, that only answers one question. The other problem is when I tab to a link on a page with a white background with the solid outline or to a link on a dark background with the slotted outline. What I did have was a pinky-orange type colored focus outline which was pretty much visible on all page backgrounds that I downloaded. There does not seem to be a way of changing from the 'pref' defaults, apart from the text background & text color. kaufhausb
I think the focus ring follows the text color of the outlined element. You can use custom style rules to modify them both for particular elements. For example, this is a rule that would apply to links, coloring both the text and ring around focused elements red-orange:
@namespace url(http://www.w3.org/1999/xhtml); a:focus { outline-width: 2px !important; /* thicker line */ outline-offset: 2px !important; /* more space inside */ color: #f60 !important; /* orange-red */ }
This is copied from a Stylish rule I tested; if you use the Stylish extension, create a new blank rule and paste the above and click Preview to try it.
An older example: https://support.mozilla.org/questions/1008824#answer-598589
Hi jscher2000 Thankyou for the reply & info I tried your suggestion & the text color changed, but the outline stayed the same. But what I did do is use 'border' instead of outline ie a:focus {
border-style: solid; border-width: 4px; border-color: #FF80FF ;
} this gave me thick pink border around the focused link. In combination with making 'browser.display.focus_ring_width' = 0 gave me pretty much what I wanted. Thankyou for your time and effort. kaufhausb
Note that you can use outline this way:
a:focus { outline: 2px solid #f60 !important; /* thicker line color orange */ outline-offset: 2px !important; /* more space inside */ }
Hi cor-el Tried your suggestion, didn't work. Browser does not seem to recognise the term 'outline' other than through the 'config' file. I am ok with what I managed to implement with 'border'. Thanks for your time & effort. kaufhausb
Chosen Solution
That code needs to be in the userContent.css file.