Firefox 93.0 -- how do I get rid of black border on focused searchbar?
Firefox just updated itself to 93.0 and now suddenly I have a big black border around the searchbar when it is focused. The userchrome "#searchbar { border: none !important; }" gets rid of the white border when the searchbar is not focused, but (just a stab in the dark) the userchrome "#searchbar[focused="true"] { border: none !important; }" does nothing when it is focused. How can I get rid of it? (It can be seen in the right-hand part of the attached image.)
Ọ̀nà àbáyọ tí a yàn
Got it. Finally found a spot poking with the inspector. The following does the job:
- urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, #searchbar:focus-within { outline:none !important; }
No idea why this has suddenly appeared and suddenly become so complex.
Thanks for your help.
(Cannot find any button on this Firefox support page, the one with your answer to which I am responding, that will give me monospace font text like your example.)
Ka ìdáhùn ni ìṣètò kíkà 👍 0All Replies (6)
I wonder whether the black color is part of your theme? My search box and address bar still have the same "blue glow" outline they had in Firefox 92. I think those might be a box-shadow, rather than a border, but I haven't poked around in the Browser Toolbox to find out. (MDN: https://developer.mozilla.org/docs/Tools/Browser_Toolbox)
I've been poking around the toolbox with no success as yet -- poked around a bunch before posting. It is a nice tool, but I cannot find what is setting that color. Am using the system theme with some userchrome overrides mainly from Classic Theme Restorer. WIll poke some more, now.
Ti ṣàtúnṣe
This is giving me the blue glow in Firefox 93:
#urlbar[focused="true"] > #urlbar-background, #searchbar:focus-within { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); }
Do you have rules for :focus-within ? https://developer.mozilla.org/docs/Web/CSS/:focus-within
Note: to find rules for focus and hover states, in the Browser Toolbox inspector, near the top of the rules panel, click :hov to open a row of checkboxes.
Ọ̀nà àbáyọ Tí a Yàn
Got it. Finally found a spot poking with the inspector. The following does the job:
- urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, #searchbar:focus-within { outline:none !important; }
No idea why this has suddenly appeared and suddenly become so complex.
Thanks for your help.
(Cannot find any button on this Firefox support page, the one with your answer to which I am responding, that will give me monospace font text like your example.)
OneMoreName said
(Cannot find any button on this Firefox support page, the one with your answer to which I am responding, that will give me monospace font text like your example.)
There are two ways:
(1) Type at least one space at the beginning of each line of code
(2) Use the HTML preformatting tags (quote my reply to see how)
This thread looks related, if you end up needing another property to manipulate in the future: https://www.reddit.com/r/FirefoxCSS/comments/q223dy/firefox_93_urlbar_and_serach_border_width_code/