Customizing Radio Buttons and Checkboxes

[ktomasso]

Probably a silly question, but can you customize radio buttons and checkboxes using ONLY CSS? My search resulted in a bunch of jQuery and mootools results, but I want a pure CSS solution if possible.

[Chris Coyier]

If you mean like literally changing the border of the little box on the checkbox, or using a custom checkmark graphic instead of the browser default, or some fine-grained customization like that. Nope, not possible. There are some pretty cool possibilities with JavaScript though, as you are finding. Basically they end up hiding the inputs entirely and replacing them with customized one.

Next week I plan to do tutorials that will be covering this.

[AshtonSanders]

Yea, figured as much. I’ll look for those tuts.

[ktomasso]

Thanks, Chris.

Someone passed on this article that shows what happens in multiple browsers if you try to style form elements with only CSS. Sums it up pretty well.

http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/

[Author]

Posts