3
Checkboxes in Clear Recent History (fedia.io)
submitted 8 months ago* (last edited 8 months ago) by tjn21@fedia.io to c/FirefoxCSS@fedia.io
5 comments fedilink hide all child comments

The question about checkboxes inspired me to try to change the colour of unchecked checkboxes in Clear Recent History (ctl+shft+del) in History > Clear Recent History.

I found the menu command in the Browser Toolbox and I used that to identify the modal. On my system is was the 343rd menuitem. My code doesn't work but I don't know why.

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

top 5 comments
sorted by: hot top controversial new old
[-] MrOtherGuy@lemmy.world 2 points 8 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@fedia.io 1 points 8 months ago

Thanks for that. I will look at the link.

[-] tjn21@fedia.io 1 points 8 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@lemmy.world 1 points 8 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@fedia.io 1 points 8 months ago

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

this post was submitted on 08 Mar 2024
3 points (100.0% liked)

Firefox Customs

2 readers
2 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Rules

  1. Posts must have flair!
  2. Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
  3. Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
  4. When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
  5. Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago
MODERATORS
yoasif@fedia.io
MrOtherGuy@lemmy.world