Checkbox Styling

[csosa]

Hi,

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

EX:

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

[ronpat]

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

[csosa]

cool thank you

[Stomme_poes]

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.