Log

View Options

Custom Form Check Boxes

6/25/13

I found my self wanting to style form check boxes, however after looking around a bit on-line I didn't come across any simple CSS solutions. Of the solutions I did find, many of them were Web-Kit reliant and didn't work very well in older browsers. I made this simple JS class to allow custom styling of check boxes.

The class it's self is pretty straight forward. You give it a name(id), title(label), up HTML, selected HTML, over HTML, and CSS class and it returns a custom check box object. After your check box is created you can then append it to whatever form you need via the JavaScript appendChild() command. It is also a good idea, if you are using images, to preload any images you may want to use (see example package).

Here is an example of the class in action.

Select fruits

Here is a basic example of using the class.

DOWNLOAD THE EXAMPLE PACKAGE!

Update
I ended up finding a pretty nice CSS based checbox styling tutorial.