Specifically I am getting stuck because of this rule[1]: body * { box-sizing: border-box; text-align: start; } which will set `text-align: start` on everything in the body. When this is applied to an options page text <inputs> will have an anonymous content div which gets this rule applied. As a result, it is impossible to make a text <input> with `text-align: center` since stylesheets provided by extensions are not allowed to style anonymous content. i.e. the following won't work: input[type=text] > .anonymous-div { text-align: center; } Does the `body *` rule need to be this broad? What is it trying to achieve? [1] https://searchfox.org/mozilla-central/rev/ef8b3886cb173d5534b954b6fb7eb2d94a9473d0/browser/components/extensions/extension.css#19-22

Blake, do you know what the `text-align: start` is needed for in extension.css in the following rule: body * { box-sizing: border-box; text-align: start; } Is there any way we could scope that more narrowly? For the particular problem I am trying to solve, even just the following might work: e.g. body *:not(.anonymous-div) { text-align: start; }

Shorlander would be the person to ask about why, but I suspect we weren't thinking about anonymous content, and the lack of stylability from extensions. The example fix you give in comment 1 would work just fine for me. :)

Shane, can you add this to browser_style tracker you have going?

Or just get rid of the `text-align` property from `body *` altogether, and if you need to unset it for <button>s, <input> and <select>, which you don’t, as the annoying `.browser‑style` class from bug 1354336 already does that to everything it’s applied to.

Yeah, I just don't understand why it was set in the first place so I wasn't sure if it's ok to drop it. (I'm pretty cautious about changing extension.css. For example, the changes to checkbox styling in bug 1371951 messed up the options page in my extension and it's now quite hard to make that page look correct on versions of Firefox with and without that change.)