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):
$('input').ezMark();
Likewise, you can also use custom selectors for checkbox or radiobuttons:
// to apply only to checkbox use:
$('input[type="checkbox"]').ezMark();
// for only radio buttons:
$('input[type="radio"]').ezMark();
Parameters:
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:
$('input[type="checkbox"]').ezMark({
checkboxCls: 'your-default-checkbox-class-name' ,
checkedCls: 'your-checkbox-class-in-checked-state'
});
// for only radio buttons:
$('input[type="checkbox"]').ezMark({
radioCls: 'your-default-radiobutton-class-name' ,
selectedCls: 'your-radiobutton-class-in-selected-state'
});