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

[userChrome.css] Selector for the arrow of the Protections popup

  • 4 replies
  • 1 has this problem
  • 26 views
  • Last reply by jscher2000

more options

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?

Attached screenshots

All Replies (4)

more options

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

Helpful?

more options

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:

Helpful?

more options

You are right, support for styling shadow parts in user-origin stylesheets has not yet been implemented. It's sad.

Helpful?

more options

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.

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.