X
點擊此處開啟此網站的行動版。

技術支援討論區

How can I disable the dotted rectangular on-click browser highliter?

已張貼

Every time I click a button, text link or anything clickable on the web, it gets highlighted by this dotted rectangle, like my screenshot (not the yellow border), this is specially annoying on web apps. Anyone knows how to disable it?

https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-12-12-13-39-35-ed894f.png

I'm using Firefox 71.0 on elementary OS 5.1

Every time I click a button, text link or anything clickable on the web, it gets highlighted by this dotted rectangle, like my screenshot (not the yellow border), this is specially annoying on web apps. Anyone knows how to disable it? https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-12-12-13-39-35-ed894f.png I'm using Firefox 71.0 on elementary OS 5.1
附加的畫面擷圖

由 Sef Eiba 於 修改

被選擇的解決方法

I believe you want the following CSS code:

*::-moz-focus-inner {
	border-width: 0 !important;
	border-style: none !important;
	padding: 0 !important;
}

This code should work if you put it into a userContent.css file, which you can set up the same way that you would set up a userChrome.css file on Firefox.

You'll have to restart Firefox to see the change.

Before you bother making the change, you may want to visit this demo website first to see if the code actually works for you. On the demo page, the buttons on the left should have the problem that you are referring to, but the ones on the right should be fixed. If that's the case, then the code above is almost certainly what you're looking for.

Hope this helps.

從原來的回覆中察看解決方案 1
引用

額外的系統細節

應用程式

  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0

更多資訊

Wesley Branton
  • Top 10 Contributor
690 個解決方法 5487 個答案

選擇的解決方法

I believe you want the following CSS code:

*::-moz-focus-inner {
	border-width: 0 !important;
	border-style: none !important;
	padding: 0 !important;
}

This code should work if you put it into a userContent.css file, which you can set up the same way that you would set up a userChrome.css file on Firefox.

You'll have to restart Firefox to see the change.

Before you bother making the change, you may want to visit this demo website first to see if the code actually works for you. On the demo page, the buttons on the left should have the problem that you are referring to, but the ones on the right should be fixed. If that's the case, then the code above is almost certainly what you're looking for.

Hope this helps.

I believe you want the following CSS code: <pre><nowiki> *::-moz-focus-inner { border-width: 0 !important; border-style: none !important; padding: 0 !important; } </nowiki></pre> This code should work if you put it into a [http://kb.mozillazine.org/index.php?title=UserContent.css userContent.css file], which you can set up the same way that you would [https://www.userchrome.org/how-create-userchrome-css.html set up a userChrome.css file on Firefox]. You'll have to restart Firefox to see the change. Before you bother making the change, you may want to [https://codepen.io/afercia/full/Gvrzwz visit this demo website] first to see if the code actually works for you. On the demo page, the buttons on the left should have the problem that you are referring to, but the ones on the right should be fixed. If that's the case, then the code above is almost certainly what you're looking for. Hope this helps.
這篇文章有幫助嗎? 1
引用

提出問題者

Hi, thanks for the reply, I have used your code, but I'm still seeing the dots everywhere. I need to understand where that comes from. The demo page you have sent worked fine and I didn't see any dots in it.

Hi, thanks for the reply, I have used your code, but I'm still seeing the dots everywhere. I need to understand where that comes from. The demo page you have sent worked fine and I didn't see any dots in it.

由 Sef Eiba 於 修改

這篇文章有幫助嗎?
引用
cor-el
  • Top 10 Contributor
  • Moderator
17675 個解決方法 159891 個答案

有幫助的回覆

Did you check these focus_ring prefs on the about:config page ?

  • browser.display.focus_ring

You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.

Did you check these focus_ring prefs on the <b>about:config</b> page ? *browser.display.focus_ring You can open the <b>about:config</b> page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue. *https://support.mozilla.org/en-US/kb/about-config-editor-firefox
這篇文章有幫助嗎? 1
引用

提出問題者

Thank you so much, it worked, I have changed .focus_ring_style and .focus_ring_width to 0, and now I don't see that thing anymore, cheers!

Thank you so much, it worked, I have changed .focus_ring_style and .focus_ring_width to 0, and now I don't see that thing anymore, cheers!
這篇文章有幫助嗎?
引用
問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題