Checkbox Styling

oh noes, that code in the example-links sets the controls (radios and checks) to display: none.

Better to zero the opacity (I have used this and tested in various browsers+AT and it works). Opacity doesn’t screw with screen readers, keyboard focus, or form-control submission (mostly older browsers like IE8 by now I think wouldn’t always send info of display: none controls)

I’m pretty sure the OP of that thread clicked the inputs with a mouse only, and was able to change the check/radio state via the for-id attribution (clicking the label can pass the click down to the input), but labels are not natively focusable… and neither are things displayed-none.

2 Likes