Checkbox Styling


Any know of any third party check box styling?
Like to change the color of the check mark and box.


 <input type="checkbox" name="Transportation" required="required"> <label>Rail</label>

Hi, carlos.

Please take a look at these two posts by @coothead in which he modified the size and color of checkboxes and radio buttons.

Perhaps these examples will help.

Change appearance of a checkbox - #4 by coothead (check boxes)

Change appearance of a checkbox - #5 by coothead (radio buttons)

These are good examples to keep in your developer’s notebook :smile:

1 Like

cool thank you

1 Like

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.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.