Checkboxes in Clear Recent History

MrOtherGuy Mod , 2 months ago

Your example css here kinda makes me believe that you have a wrong idea about how selectors work. What you have written sounds like your intention is to create a sort of scope with the outer #menu-history-clear-recent-history selector and then apply the rules to elements matching .checkbox-check within that outer scope - that is, to match .checkbox-check elements which are inside #menu-history-clear-recent-history.

That kind of construction doesn't exist in css and thus this is invalid rule.
What you would do instead is like this:

#menu-history-clear-recent-history .checkbox-check { appearance: none !important; background: #e2cfb6; }

The space character between selectors (the descendant combinator) means "what comes after it needs to be inside what came before it".
More about selectors at MDN

tjn21 OP , 2 months ago

Thanks for that. I will look at the link.

tjn21 OP , 2 months ago

I amended the code. I am printing it here to be sure. The colour of the checkboxes has not changed. Back to the drawing board. I will try adding !important to the colour.
#menu-history-clear-recent-history .checkbox-check { appearance: none !important; background: #e2cfb6; }

MrOtherGuy Mod , 2 months ago

Okay, so I looked a bit more and there's few other things at play here.

First, there is no element with id menu-history-clear-recent-history anywhere. There is one menuitem in menubar > history > Cler recent history with a data-l10n-id="menu-history-clear-recent-history" attribute, but that is not the same thing as id attribute (which you can match with a # prefix)

Second, that menuitem merely opens the sanitize dialog, but contents of tha dialog are not in any sense inside that menuitem. Thus, you cannot use the a selector for the menuitem as an ancestor for the checkbox in your selector.

The dialog is separate sub-frame with its own document and all so you could do this in a couple of different ways: You can either write #SanitizeDialog .checkbox-check { appearance: none !important; background: #e2cfb6; } because the sanitize dialog root element has an id attribute SanitizeDialog - or you could make your rule really scoped to the sanitizeDialog document like this:

@-moz-document url("chrome://browser/content/sanitize.xhtml"){
  .checkbox-check { appearance: none !important; background: #e2cfb6; }
}

These are different things because if there ever was some situation in any Firefox window where a .checkbox-check was inside any element with id SanitizeDialog then it would match. The second option will only ever match all .checkbox-check elements inside a document with that specific url.

tjn21 OP , 2 months ago

Thanks for your help. My idea was misconceived. If the 'image' is hidden, there is nowhere to insert 'checkmarks'.