[userChrome.css] Selector for the arrow of the Protections popup
I need to customize the arrow of the Protections popup (i need to change the fill property), but I can't find the correct CSS selector for it. #protections-popup::part(arrow) doesn't work for some reason. Can anyone help me with this?
All Replies (4)
Hmm, I don't have that triangle in Firefox 89. I thought it was retired as part of Proton?
More generally, there are many challenges styling Shadow DOM elements. I read on r/FirefoxCSS that we cannot use ::part() in userChrome.css so we are limited to using more general rules, if they work.
r/FirefoxCSS = https://www.reddit.com/r/FirefoxCSS/
Modified by jscher2000 - Support Volunteer
You can't use code in userChrome.css to use a selector that crosses shadowDOM and this means that styling such an element is all or nothing and in this case I think you are out of luck.
See also:
You are right, support for styling shadow parts in user-origin stylesheets has not yet been implemented. It's sad.
Where the rules use CSS variables, you can override the variable, but in this case, the fill on that element appears to be a specific color, so seems to be out of reach. But also that element is display:none with Proton, so perhaps not long for this world anyway.