bug: input checkbox background-image overrides checked:background-color

[nader-eloshaiker]

What version of daisyUI are you using?

v4.4.9

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/Ux75Tg56m3

Describe your issue

When trying to override the backgroundColor of a checked input checkbox, it will not apply the color until the backgroundImage style is removed.

[saadeghi]

Thanks for reporting.
Please update to 4.4.10
And you can customize the colors like this:
https://daisyui.com/components/checkbox/#checkbox-with-custom-colors

--chkbg CSS variable controls the background color.
--chkfg CSS variable controls the foreground color.
Example: https://play.tailwindcss.com/V0zzaF7mu4

[nader-eloshaiker]

Thank you very much for not only fixing this in amazing time but for the added value of a better solution.

[nader-eloshaiker]

Just a small question regarding this though, what if I use a hex string? I have tried a few ideas but cannot make it work?

[saadeghi]

It can be hex. It can be any color format:
https://play.tailwindcss.com/UyUhz4G0Zx

[nader-eloshaiker]

There appears to be another issue, if you set a transparency to the color, the background image gradient comes through.

[saadeghi]

It's not a SVG icon. It's an icon made with CSS gradient so, yes, the color shouldn't be transparent.
If you tell me what exactly you want to design, I can help you better.

[nader-eloshaiker]

I was interested in allowing the container background color to bleed through the backgound of the checkbox (to tint the background of the checkbox). The background of the checkbox is dynamic and is not known at codetime, only at runtime.

[saadeghi]

In that case you can use a custom icon image with a custom background color like this:
https://play.tailwindcss.com/bgY5cqUwkC