Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

How to make dotted outline bigger and more noticeable?

  • 3 replies
  • 2 have this problem
  • 6 views
  • Last reply by philipp

Lockywolf
Lockywolf
more options

I use Firefox to fill a lot of forms. It is easier to do without using the mouse and switching between elements with Tab and Shift+Tab.

Firefox shows the cursor flickering bar in every input field which is a text field and bounds other elements with a tiny dotted line.

What I want is to make this dotted line more prominent to make it stand out of the page, to make it easier to spot.

On Google I found many discussions on how to remove this outline with CSS vendor-specific properties, but not much about customizing it from a user's point.

Perhaps, I could add a user CSS or a user JS (with greasemonkey), but I am not sure what to write there. Can I somehow set this property for every element?

I use Firefox to fill a lot of forms. It is easier to do without using the mouse and switching between elements with Tab and Shift+Tab. Firefox shows the cursor flickering bar in every input field which is a text field and bounds other elements with a tiny dotted line. What I want is to make this dotted line more prominent to make it stand out of the page, to make it easier to spot. On Google I found many discussions on how to remove this outline with CSS vendor-specific properties, but not much about customizing it from a user's point. Perhaps, I could add a user CSS or a user JS (with greasemonkey), but I am not sure what to write there. Can I somehow set this property for every element?

Chosen solution

hi, you can do the following: enter about:config into the firefox address bar (confirm the info message in case it shows up) & search for the preference named browser.display.focus_ring_width. double-click it and change its value to 4.

Read this answer in context 👍 1

All Replies (3)

FredMcD
FredMcD
more options

You can use a form filling add-on to save some time.

Go to the Mozilla Add-ons Web Page {web link} (There’s a lot of good stuff here) and search for what you want.

Lockywolf
Lockywolf Question owner
more options

Sorry, but it doesn't solve the issue.

I really need to be able to see the "currently selected element". Just because I use keyboard a lot.

philipp
philipp
  • Moderator
more options

Chosen Solution

hi, you can do the following: enter about:config into the firefox address bar (confirm the info message in case it shows up) & search for the preference named browser.display.focus_ring_width. double-click it and change its value to 4.