Indeterminate checkbox background color

[s-montigny-desautels]

Hi!

The background colour seems to not be set for the indeterminate checkbox. This is what it looks like when I use the checkbox inside a table

I think the indeterminate pseudo-class is missing for each colour of the checkbox.

[saadeghi]

Do you see this issue here too?
Are you using any other CSS package or plugin that may apply styles to a checkbox?

[s-montigny-desautels]

Yes, I see this issue in the codepen. It's subtle, but there is a black border around the checkbox.

Here is with Google Chrome

Here is with Firefox

When the checkbox is checked, it look like this

I'm only using DaisyUI with Tailwindcss for the CSS.

[saadeghi]

I can't see the issue unfortunately. Tested on Android, iOS and tested on MacOS with Chrome, Safari, Edge and Firefox.

Can you try it on incognito mode with all plugins disabled? I want to make sure Chrome plugins are not affecting the style.

Also, please tell me What OS and which Chrome version you're using.

[s-montigny-desautels]

I'm using Chrome 107.0.5304.87 on Fedora 37. I see the issue in Incognito. I see the issue on my phone too, wich is a Samsung S20 on android 12 using Google Chrome.

On a mac, at first, I didn't see the issue. But when I changed the zoom, I started to see it sometimes. I've managed the find a workaround for my project. I've added those components in my tailwind config.

addComponents({
	".checkbox": {
		"&-primary": {
			"@apply indeterminate:!bg-primary": {},
		},
		"&-secondary": {
			"@apply indeterminate:!bg-secondary": {},
		},
		"&-accent": {
			"@apply indeterminate:!bg-accent": {},
		},
		"&-success": {
			"@apply indeterminate:!bg-success": {},
		},
		"&-info": {
			"@apply indeterminate:!bg-info": {},
		},
		"&-warning": {
			"@apply indeterminate:!bg-warning": {},
		},
		"&-error": {
			"@apply indeterminate:!bg-error": {},
		},
	},
});