ezMark: jQuery Checkbox & Radiobutton Plugin

ezMark is a jQuery Plugin that allows you to stylize Radio button and Checkbox easily. Its very small (minified version is ~1.5kb) compared to other similar scripts. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it gracefully degrades.

It has the following Method:

$('selector').ezMark( [options] ); 

Basic Usage:

Include the CSS file:

Then include the jquery.js file and the plugin file:

Write the HTML tags normally, as you would type them

Now, call the following method in your JS (to apply on all checkbox & radiobutton across the page):


Likewise, you can also use custom selectors for checkbox or radiobuttons:

// to apply only to checkbox use:

// for only radio buttons:


options parameter accepts the following JSON properties:

Parameter’s (JSON) Properties: Explanation/Details of the Property
checkboxCls The Checkbox Class as per declaration on CSS.
checkedCls The Checkbox Class on Checked State
radioCls The Radio button’s Class as per CSS
selectedCls The Radio Button’s Class on selected State

To customize the default checkbox/radiobutton image, change the background image (checkbox-black.png/radio-black.png) and CSS (ez-checkbox/ez-radio) and (ez-checked/ez-selected) accordingly.

Customized Usage:

After you have customized/created your own css class. Simply call the ezmark method like below:

// to apply only to checkbox use:
 checkboxCls: 'your-default-checkbox-class-name' ,
 checkedCls: 'your-checkbox-class-in-checked-state'

// for only radio buttons:
 radioCls: 'your-default-radiobutton-class-name' ,
 selectedCls: 'your-radiobutton-class-in-selected-state'

View Demo

Download from Github

Download from jQuery Server