WP 7.0 beta 5 and 6 <> WooCommerce Product Bundles 8.5.6 - no visual checkmark in some checkboxes

[kkarpieszuk]

steps to reproduce:

• install wp 7.0 beta 6
• woocommerce 10.6.1
• woocommerce product bundles 8.5.6
• create some regular wc product
• create next product with type product bundle
• in Bundled products choose the first product as ingredient
• open basic settings ofthat ingredient
• click on checkboxes for "Optional" and "Priced individually"
• result: the checkboxes changes their state (when saved, the logic coming from them works) but there is no visual confirmation of the checkbox being checked

on the screenshot, Optional is not checked, but Priced individually is checked (when checked "Discount %" field starts to be visible)

[kkarpieszuk]

Woocommerce product bundle screenshot with Optional checkbox not checked and Priced individually checkbox checked

[wildworks]

Thanks for the report.

WooCommerce Product Bundles is a paid product, so I'm unable to test the issue directly, but this seems to be related to #64840. For some reason, the CSS custom property referenced as the background color for the checkbox might not be defined.

[wildworks]

@kkarpieszuk, can you open your browser developer tool and see what styles are applied to a checkbox?

Under normal circumstances, the custom CSS variable var(--wp-admin-theme-color) should be applied as the background color value.

My hypothesis is that in WooCommerce Product Bundles, although CSS custom properties are correctly applied to the checkbox, the problem is that the definition of the CSS custom properties themselves is missing. As a result, the checkbox's background color remains white, making the checked state visually hidden.

[wildworks]

Check the checkbox style via browser developer tools

[cbirdsong]

Could it be changed to this?

input[type=checkbox]:checked, input[type=radio]:checked {
    background: var(--wp-admin-theme-color, currentColor);
    border-color: var(--wp-admin-theme-color, currentColor)
}

[joedolson]

I'm accepting this to investigate; but we need more information about the specific CSS you're getting in the WooCommerce addon, @kkarpieszuk.

If you can share what the CSS you're seeing, we can explore further. The hypothesis by @wildworks is reasonable, but isn't enough for us to go on to know we're resolving the issue.

[cbirdsong]

I can replicate it with any checkbox/radio button in the admin by removing/disabling the CSS that sets --wp-admin-theme-color, though you can see the check mark if it's on a gray background instead of white: ​https://cleanshot.com/share/k7sg3mXG

Ultimately this is because -webkit-appearance: none; is applied to input[type="checkbox"], which disables default browser behavior for checkboxes. Why was that the choice for theming form elements instead of applying it via accent-color, which falls back to a sensible default automatically?

[joedolson]

Since -webkit-appearance: none; was added in 2013, my guess to answer your question would be "it was the best option at the time".

I understand that you can remove the color by editing the CSS; what I'm trying to know is what is the plugin doing that's resulting in this difference.

[mukesh27]

Removing the background color from plugin custom CSS

[mukesh27]

Hi there!

I checked the latest WooCommerce Product Bundles plugin version against RC1 and captured before/after screenshots.

Based on the screenshots, the core CSS is working as expected. The issue appears to be caused by the plugin’s custom CSS, which adds background-color: #fff; and overrides the core styling. That override is what’s causing the UI issue.

Hopefully someone from the extension team can adjust the plugin CSS accordingly.

With that, I believe we can close this ticket since it doesn’t appear to be a core issue.

[joedolson]

While this is connected to the changes in core CSS, it's not because the CSS variable isn't set, and adding a fallback value wouldn't fix anything. The colors are just being overridden by the plugin.

It's because the old styles used a white background on checkboxes, so setting the background to white wasn't a problem previously.

The styles are being too aggressively applied to all input types, but the core checkbox and radio types don't use color to set their text color; they use generated content.

The only reasonable fix we could make for this would be revert the color inversion or increase the specificity of the core styles. I don't think either of those are viable, so I'm inclined to agree that this should be closed.

[wildworks]

I'm inclined to agree that this should be closed.

I agree with this.

[mukesh27]

@kkarpieszuk Could you please open a ticket with the WooCommerce Product Bundles support system so they can update their custom CSS?

Closing this for now.