We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

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 antwoorde
  • 1 het hierdie probleem
  • 18 views
  • Laaste antwoord deur 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.

Gekose oplossing

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

Lees dié antwoord in konteks 👍 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

Gekose oplossing

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