Zebra TransForm

This plugin is mainly intended to be used for styling checkboxes, radio buttons and select boxes in older versions of Internet Explorer, like IE7 and IE8, but it can also be used in other browser if you want to consistently style these form controls cross browser.

Zebra TransForm is a tiny (~5KB minified) jQuery plugin for styling the appearance of check boxes, radio buttons and select boxes without sacrificing functionality and accessibility. This jQuery plugin works by overlaying stylable elements over the native controls. It works in sync with the form's original elements copying the attached event handlers, preserving the tabindex, giving visual feedback when focused, being accessible via keyboard, and looking and behaving in the same way in pretty much any browser – Chrome, Firefox, Safari, Edge, Opera and Internet Explorer 7+ (in IE6 it will not replace original elements).

---

Checkboxes

Notice how the first item is both disabled and checked

HTML

                        <div id="checkboxes">
                            

                                
                                Checkbox 1
                            
                            

                                
                                Checkbox 2
                            
                            

                                
                                Checkbox 3
                            
                        </div>
                    

JavaScript

                        new $.Zebra_TransForm($('#checkboxes input'));

                        // to style *all* stylable elements pass no arguments to the constructor, like:
                        //new $.Zebra_TransForm();
                    

Result

Notice that pressing tab or shift-tab works as expected, as well as checking/unchecking using the space key

Radio buttons

First item is disabled

HTML

                        <div id="radio-buttons">
                            

                                
                                Radio button 1
                            
                            

                                
                                Radio button 2
                            
                            

                                
                                Radio button 3
                            
                        </div>
                    

JavaScript

                        new $.Zebra_TransForm($('#radio-buttons input'));

                        // to style *all* stylable elements pass no arguments to the constructor, like:
                        //new $.Zebra_TransForm();
                    

Result

Notice that pressing up or down works as expected, as well as checking/unchecking using the space key

Select boxes

Padding works in IE7!

HTML

                        <div id="select-boxes">
                            

                                
                                    - Select -
                                    Select option 1
                                    Select option 2
                                    Select option 3
                                
                            
                        </div>
                    

JavaScript

                        new $.Zebra_TransForm($('#select-boxes select'));

                        // to style *all* stylable elements pass no arguments to the constructor, like:
                        //new $.Zebra_TransForm();
                    

Result

Notice that pressing up or down works as expected, as well as using F4 for opening the drop-down

copyright © 2011 - stefan gabos