Twenty Twenty-One: Text isn't vertically centered to the checkbox

[ooker]

I think we should add vertical-align: middle; into the line 1344 to have text aligning centerally vertically to the checkbox. Currently the code is like this:

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

	input[type=checkbox],
	input[type=radio] {
		-webkit-appearance: none;
		-moz-appearance: none;
		position: relative;
		width: 25px;
		height: 25px;
		border: var(--form--border-width) solid var(--form--border-color);
		background: var(--global--color-white);
	}

[peterwilsoncc]

Hi @ooker and welcome back to trac!

I notice you included the has-screenshots keyword, did you intend to attach an image to the ticket?

[ooker]

Screenschot

[justinahinon]

Hello @ooker,

I can not reproduce the output on your screenshot. The checkboxes are correctly aligned for me (see screenshot ​https://cln.sh/VfGtXv).

Maybe there's another plugin interfering with this element style?

Can you confirm you still have the same behavior on a fresh WordPress installation with no plugin activated?

[ooker]

It turns out that only checkboxes produced by the plugin Formidable Form has this problem. But the problem is forms from that plugin can inherit styles from the theme by disable custom styling. It seems that other themes don't have this problem (or else the plugin author should have fixed it).

Anyhow, would there be any problem to add vertical-align: middle; into the line 1344? It may fixed future bugs as well.