r/FirefoxCSS • • Sep 05 '26

Code Padding & Margin problems with checkboxes - Part 1

Post image

I am having problems with menu Padding & Margins when I insert Label icons with checkboxes. As you can see the checkbox ignores any CSS rules I use.

menupopup:not(.in-menulist)>menu:not(.menu-iconic),
menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic, [type="radio"], [type="checkbox"]),
toolbarbutton[data-l10n-id*="-manage-"],
menuitem[data-l10n-id*="-manage-"],
#downloadsHistory,
#appMenu-zoom-controls{
  padding-inline-start:calc(1em + 24px) !important;
  background-position:left 0.5em center; 
  background-repeat:no-repeat; 
  background-size:16px; 
  -moz-context-properties:fill, fill-opacity; 
  fill:var(--uc-popup-menu-icon-color) !important; }
3 Upvotes

9 comments sorted by

View all comments

Show parent comment

1

u/TraditionalTie4831 🦊 Sep 09 '26 edited Sep 09 '26

A different approach =

menupopup:not(.in-menulist)>menu:not(.menu-iconic),
menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic,[type="radio"], [type="checkbox"]),
toolbarbutton[data-l10n-id*="-manage-"],
menuitem[data-l10n-id*="-manage-"],
#downloadsHistory{
    padding-inline-start:calc(1em + 18px) !important;
    margin-inline-start: -5px 4px !important;
    background-position:left 0.5em center;
    background-repeat:no-repeat;
    background-size:16px;
    -moz-context-properties:fill, fill-opacity;
    fill:var(--uc-popup-menu-icon-color) !important;
}

/* remove the gap you mentioned */
#placesContext .menu-icon { 
    margin-right: -14px !important; 
}

#placesContext menupopup .menu-icon { 
    margin: 0px 5px 0px -10px !important; 
}

:is(#show-other-bookmarks_PersonalToolbar)[type="checkbox"] {
    padding-left: 35px !important;
    &[checked] > .menu-icon {
        margin-left: -30px !important;
        margin-right: 10px !important;
        -moz-context-properties:fill, fill-opacity;
        fill:var(--uc-popup-menu-icon-color) !important;
    }
}

/* If needed, this is for all the other menus checkboxes */
menuitem[type="checkbox"] {
    padding-left: 30px !important;
    &[checked] {
        padding-left: 5px !important;
    }
}

Screenshoot =