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

Firefox 93.0 -- how do I get rid of black border on focused searchbar?

more options

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.)

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.)
Attached screenshots

Chosen solution

Got it. Finally found a spot poking with the inspector. The following does the job:

  1. 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.)

Read this answer in context 👍 0

All Replies (6)

more options

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)

more options

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.

Modified by OneMoreName

more options

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.

more options

Chosen Solution

Got it. Finally found a spot poking with the inspector. The following does the job:

  1. 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.)

more options

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)

more options

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/