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

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?

  • 8 replies
  • 1 has this problem
  • 18 views
  • Last reply by cor-el

more options

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.

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 👍 0

All Replies (8)

more options

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

more options

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

more options
more options

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

more options

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

more options

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 */
}

more options

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

more options

Chosen Solution

That code needs to be in the userContent.css file.