Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

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 respostas
  • 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.

Ler a resposta no contexto 👍 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.