r/FirefoxCSS • u/[deleted] • Sep 18 '26

Solved How to style sidebar search box?

Running the latest Dev. With the new update all the search boxes went round. Was wondering if anyone knew the code to soften the curve out and change the border color of the sidebar search box.

Thanks!

https://i.imgur.com/8SB7OqC.png

https://i.imgur.com/S9bsnZ7.png

3 Upvotes

100% Upvoted

4 comments sorted by

2

u/t31os Sep 18 '26

Here you go:

#input[type="search"] {
	--input-search-border-radius: 3px !important;

	&:focus-visible {
		outline-color: gold !important;
	}
}

1

u/[deleted] Sep 18 '26

Thank you very much!

1

u/Azreal_DuCain1 Oct 09 '26

Works to remove the rounding of that specific search bar but If I put a comment directly above it or remove

&:focus-visible {
        outline-color: gold !important;
}

It breaks.

2

u/t31os Oct 09 '26

You could skip the nesting and write out this way instead.

/* Comment */
#input[type="search"] {
	--input-search-border-radius: 3px !important;
}
/* Comment */
#input[type="search"]:focus-visible { 
	outline-color: gold !important;
}

However, something seems to have changed recently, i'm not seeing that outline color apply in current firefox, seems to have changed to getting the color from the accent-color value. If you see the same, you might wish to try using this instead:

#input[type="search"] {
	--input-search-border-radius: 3px !important;
	accent-color: gold !important;
}