{"id":17976070,"url":"https://github.com/stefangabos/zebra_transform","last_synced_at":"2025-03-25T15:31:05.892Z","repository":{"id":9413841,"uuid":"11282661","full_name":"stefangabos/Zebra_TransForm","owner":"stefangabos","description":"A tiny jQuery plugin for replacing and beautifying check boxes, radio buttons, and select boxes in IE7+","archived":false,"fork":false,"pushed_at":"2025-03-18T13:56:17.000Z","size":1320,"stargazers_count":17,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-20T13:07:20.375Z","etag":null,"topics":["checkbox","forms","radio","select"],"latest_commit_sha":null,"homepage":"https://stefangabos.github.io/Zebra_TransForm/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stefangabos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"stefangabos","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2013-07-09T13:12:47.000Z","updated_at":"2025-03-18T13:56:21.000Z","dependencies_parsed_at":"2024-12-14T11:24:24.724Z","dependency_job_id":"7ecffb15-baac-4386-b072-6d212e067261","html_url":"https://github.com/stefangabos/Zebra_TransForm","commit_stats":{"total_commits":112,"total_committers":3,"mean_commits":"37.333333333333336","dds":0.0803571428571429,"last_synced_commit":"a7a6c3546c1803a622d9a6f63fc1a115435fcc21"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_TransForm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_TransForm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_TransForm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_TransForm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stefangabos","download_url":"https://codeload.github.com/stefangabos/Zebra_TransForm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245489756,"owners_count":20623789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox","forms","radio","select"],"created_at":"2024-10-29T17:21:51.935Z","updated_at":"2025-03-25T15:31:04.583Z","avatar_url":"https://github.com/stefangabos.png","language":"JavaScript","funding_links":["https://github.com/sponsors/stefangabos","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=MRK6AVGGRV7NU"],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png\" alt=\"zebrajs\" align=\"right\"\u003e\n\n# Zebra TransForm \u0026nbsp;[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=A+tiny+jQuery+plugin+for+replacing+checkboxes,+radio+buttons+and+select+boxes+in+IE7%2B\u0026url=https://github.com/stefangabos/Zebra_TransForm\u0026via=stefangabos\u0026hashtags=jquery,javascript)\n\n*A tiny jQuery plugin for replacing and beautifying checkboxes, radio buttons, and select boxes in IE7+*\n\n[![npm](https://img.shields.io/npm/v/zebra_transform.svg)](https://www.npmjs.com/package/zebra_transform) [![Total](https://img.shields.io/npm/dt/zebra_transform.svg)](https://www.npmjs.com/package/zebra_transform) [![Monthly](https://img.shields.io/npm/dm/zebra_transform.svg)](https://www.npmjs.com/package/zebra_transform) [![](https://data.jsdelivr.com/v1/package/npm/zebra_transform/badge)](https://www.jsdelivr.com/package/npm/zebra_transform) [![License](https://img.shields.io/npm/l/zebra_transform.svg)](https://github.com/stefangabos/zebra_transform/blob/master/LICENSE.md)\n\n\u003e 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.\n\n**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 all major browsers – Chrome, Firefox, Safari, Edge, Opera and Internet Explorer 7+ (in IE6 it will not replace original elements).\n\n## 🎂 Support the development of this project\n\nYour support means a lot and it keeps me motivated to keep working on open source projects.\u003cbr\u003e\nIf you like this project please ⭐ it by clicking on the star button at the top of the page.\u003cbr\u003e\nIf you are feeling generous, you can buy me a coffee by donating through PayPal, or you can become a sponsor.\u003cbr\u003e\nEither way - **Thank you!** 🎉\n\n[\u003cimg src=\"https://img.shields.io/github/stars/stefangabos/zebra_transform?color=green\u0026label=star%20it%20on%20GitHub\" width=\"132\" height=\"20\" alt=\"Star it on GitHub\"\u003e](https://github.com/stefangabos/Zebra_TransForm) [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=MRK6AVGGRV7NU) [\u003cimg src=\"https://img.shields.io/badge/-Sponsor-fafbfc?logo=GitHub%20Sponsors\"\u003e](https://github.com/sponsors/stefangabos)\n\n## Demo\n\nSee the [demos](https://stefangabos.github.io/Zebra_TransForm/index.html)\n\n## Requirements\n\nZebra TransForm has no dependencies other than jQuery 1.7.1+\n\n## Installation\n\nZebra TransForm is available as an [npm package](https://www.npmjs.com/package/zebra_transform). To install it use:\n\n```bash\n# the \"--save\" argument adds the plugin as a dependency in packages.json\nnpm install zebra_transform --save\n```\n\nLoad the latest version of jQuery from a CDN and provide a fallback to a local source, like:\n\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-3.5.0.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003ewindow.jQuery || document.write('\u003cscript src=\"path/to/jquery-3.5.0.js\"\u003e\u003c\\/script\u003e')\u003c/script\u003e\n```\n\nLoad the Zebra TransForm plugin\n\n```html\n\u003cscript src=\"path/to/zebra_transform.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, you can load Zebra TransForm from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_transform) like this:\n```html\n\u003c!-- for the most recent version, not recommended in production --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/zebra_transform@latest/dist/zebra_transform.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- for a specific version --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/zebra_transform@3.0.0/dist/zebra_transform.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- replacing \"min\" with \"src\" will serve you the non-compressed version --\u003e\n```\n\nLoad the style sheet file from a local source\n\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/zebra_transform.css\" type=\"text/css\"\u003e\n```\n\n...or from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_transform)\n\n```html\n\u003c!-- for the most recent version --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/zebra_transform@3.0.0/dist/css/zebra_transform.min.css\"\u003e\n\n\u003c!-- replacing \"min\" with \"src\" will serve you the non-compressed version --\u003e\n```\n\nNow, within the DOM-ready event do\n\n```javascript\n$(document).ready(function() {\n\n    // style all checkboxes, radio buttons and selects on the page\n    var transform = new $.Zebra_TransForm();\n\n    // unless you're planning on using the \"update\" method\n    // you can instantiate the plugin without the \"new\" keyword\n    // and without assigning it to a variable:\n    $.Zebra_TransForm();\n\n    // style checkboxes only\n    $.Zebra_TransForm($('input[type=\"checkbox\"]'));\n\n    // style checkboxes and radio buttons only\n    $.Zebra_TransForm($('input[type=\"checkbox\"], input[type=\"radio\"]'));\n\n    // style checkboxes, radio buttons and selects (same as first example)\n    $.Zebra_TransForm($('input[type=\"checkbox\"], input[type=\"radio\"], select'));\n\n    // style checkboxes of a specific parent\n    $.Zebra_TransForm($('#element input[type=\"checkbox\"]'));\n\n    // style only a specific element\n    $.Zebra_TransForm($('#element'));\n\n    // if you plan on reverting elements to their original state\n    // you must instantiate the plugin with the \"new\" keyword\n    // and assign it to a variable\n    var zt = new $.Zebra_TransForm();\n\n    // revert elements to their original state\n    zt.remove();\n\n});\n```\n\n## Configuration options\n\n## Properties\n\n\u003ctable width\"100%\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth\u003eProperty\u003c/th\u003e\n        \u003cth\u003eType\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003estyle_disabled_labels\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003etrue\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            If set to \u003ccode\u003etrue\u003c/code\u003e, labels attached to disabled checkboxes and radio buttons will also be styled to\n            look disabled.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Methods\n\n### `remove()`\n\nCall this method if you want to revert elements to their original state .\n\n```javascript\nvar zt = new $.Zebra_TransForm();\n\nzt.remove();\n```\n\n### `update()`\n\nCall this method to update element styling after manually changing a checlbox or a radio button's status.\n\n```javascript\nvar zt = new $.Zebra_TransForm();\n\nzt.update();\n```\n\n## Sponsors\n\nCross browser/device testing is done with\n\n[![BrowserStack](https://github.com/stefangabos/Zebra_Dialog/raw/master/examples/browserstack.png)](https://www.browserstack.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefangabos%2Fzebra_transform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefangabos%2Fzebra_transform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefangabos%2Fzebra_transform/lists"}