Help with checkbox check color (fedia.io)

submitted 2 years ago by soilentgreen@lemmy.world to c/FirefoxCSS@fedia.io

4 comments fedilink hide all child comments

Hi,

libreWolf V.123 (with firefox-gx theme [(https://github.com/Godiesc/firefox-gx)] ), broke the color of the checkbox check. it was black now its white.

the code:
--checkbox-checked-color: black !important;
not working anymore.
Not in ogx_notifications.css, and not in ogx_UC-settings-addons-pages.css.

There is any code for change the checkbox check to black again?

Thanks :-)

top 4 comments

sorted by: hot top controversial new old

[-] MrOtherGuy@lemmy.world 2 points 2 years ago

I don't know what ogx does, but normally the checkmarks in this context have appearance: auto and -moz-default-appearance: checkbox and as such are painted using special checkbox rendering rules. In particular, the checkmark color is derived directly from the accent-color property, which itself controls the color of the checkbox. For example, if you set accent-color: #f58 then the checkmark is near-white, but as soon as you set accent-color: #f59 it turns dark-grey.

To get around that, you need to wholly remove the appearance with appearance: none - of course, doing so will remove all aspects of checkbox rendering that come from appearance, so you need to manually style all their states.

Incomplete, but the idea would go something like this:

@-moz-document url-prefix("about:preferences"){
  .checkbox-check{
    appearance: none !important;
    background: #f00; 
  }
  .checkbox-check[checked]{
    background-image: url("chrome://global/skin/icons/menu-check.svg");
  }
}

[-] soilentgreen@lemmy.world 1 points 2 years ago

Hi, It worked your code colored the checkbox-checked to black. Thanks :-) But I can't find how to change the hover color. I would appreciate if you could help me with that as well.

[-] MrOtherGuy@lemmy.world 2 points 2 years ago

You can just add this:

.checkbox-check:hover{
  background: #00f;
}

Although, in case you mean to change the color of the checkmark, and not the box then you first need to forward fill-color to the svg image. Now the checkmark is black just because black happens to be the default color in case fill is not defined in css.

So like this:

.checkbox-check{
  appearance: none !important;
  background: #f00; 
}
.checkbox-check[checked]{
  background-image: url("chrome://global/skin/icons/menu-check.svg");
  -moz-context-properties: fill;
  fill: #000;
}
.checkbox-check[checked]:hover{
  fill: #fff;
}

[-] soilentgreen@lemmy.world 1 points 2 years ago

Thank you very much. You're truly a master. And the reason I am wrote master is because for a few weeks I've been looking for a solution and I asked in some forums, and you the only one who knew, and you even wrote a code for changing the color of the check mark. Many thanks.

this post was submitted on 01 Mar 2024

4 points (100.0% liked)

Firefox Customs

2 readers

4 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
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.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 2 years ago

MODERATORS

yoasif@fedia.io

MrOtherGuy@lemmy.world