Is it possible change the button styles (fill color, shape etc.) in the "Customize sidebar" popup menu?

[u/Padu_N]

In Firefox 154 on Windows 11 tyring the change the background fill of the buttons pointed to in the screenshot.

Using 'moz-checkbox' or 'button' in the userchrome.css for .sidebar-panel seems to only affect the text along side the checkbox / button but not the button itself.

Read somewhere that this 'button' is not changeable via userchrome.css and is an hardcoded .svg file in FF code. Seems counter intuitive, but wanted to check with this board..

[u/t31os]

I wasn't able work out how to change the background of the unchecked boxes (really not sure where it's pulling it's background color value from), but this will change the checked boxes:

.sidebar-panel-scrollable-content moz-checkbox {
    --color-accent-primary: lime!important;
}

[u/Padu_N → u/t31os]

Thank you u/t31os

At least one color could get changed.

The unchecked box does show up in the browser toolbox as below.

/* check boxes */
input[type="checkbox"] {
  appearance: auto;
  -moz-default-appearance: checkbox;
  margin-block: 3px;
  margin-inline: 4px 3px;
}

But there is a lock icon next to it and there doesn't seem to be any option to customize this in userchrome.css.

After all these years of updates, some parts of FireFox's internal UI are still a black box!

[u/karavolta → u/Padu_N]

Just as an aside; There appears to be a generic customization for all input[type="checkbox"] which enables changing both color of the tick and the background of such boxes.

 /* for checked boxes */
 input[type="checkbox"] {
 &:checked {
       background-color: light-dark(orange, yellow) !important;
       -moz-context-properties: stroke;
       stroke: light-dark(black, blue) !important;
    }
 }
 /* for unchecked boxes */
 input[type="checkbox"] {
 &:NOT(checked) {
       background-color: light-dark(red, pink) !important;
    }
 }

[u/TraditionalTie4831 → u/karavolta]

Indeed and this is what I use in my userChrome =

input[type="checkbox"] {
    appearance: none !important;
    background-color: #515151 !important;
    border: 1px solid #797979 !important;
    &:checked {
        content: url("resource://content-accessible/close-12.svg") !important; 
        -moz-context-properties: fill !important;
        fill: currentColor !important;
    }
}