Grow your CSS skills. Land your dream job.

Customizing Radio Buttons and Checkboxes

  • # April 28, 2009 at 2:40 pm

    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.

    # April 28, 2009 at 6:10 pm

    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.

    # April 28, 2009 at 7:38 pm

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

    # April 29, 2009 at 6:55 am

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".