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; } }

  • MrOtherGuy@lemmy.worldM
    link
    fedilink
    arrow-up
    1
    ·
    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.ioOP
      link
      fedilink
      arrow-up
      1
      ·
      8 months ago

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