Twenty Twenty incorrectly formats check boxes and radio buttons...

[hometowntrailers]

Twenty Twenty sets inputs to be a min-width of 1.5em by default.

That makes checkboxes look really long and not square.

See screenshot: ​https://d.pr/i/wYdIaz This illustrates both the wrong result, as well as the pertinent code.

[sabernhardt]

@hometowntrailers Thanks for the report!

The styles also set the width to 1.5rem, but that is crossed out in the inspector. Could you scroll down to see what might override that width?

[hometowntrailers]

Replying to sabernhardt:

@hometowntrailers Thanks for the report!

The styles also set the width to 1.5rem, but that is crossed out in the inspector. Could you scroll down to see what might override that width?

That's overridden by my custom CSS:

/* fix Twenty Twenty bug */
[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
    width: 10px !important;
}

[sabernhardt]

Is there another width setting that would compute to around 50 pixels?

[hometowntrailers]

Replying to sabernhardt:

Is there another width setting that would compute to around 50 pixels? (including any padding)

I don't know, and I'm not a programmer. Sorry.

Just to be clear, this affects both checkboxes and radio buttons.

[sabernhardt]

@hometowntrailers Thanks for reporting the bug. After finding your site, I found the problem in WooCommerce, not the theme. Their theme-specific style .single-product form.cart input{width:5em} made checkboxes and radio buttons about 67 pixels wide.

It's now reported on the WooCommerce support forum for them to address in the plugin:
​https://wordpress.org/support/topic/checkboxes-and-radio-buttons-are-too-wide-in-twenty-twenty/

If you would like, you could add to the discussion there.

[sabernhardt]

​Report moved to GitHub