:checked pseudo-class polyfill (for IE8 and below).
How to use
Include jQuery 1.x (compatible with old IE) >= 1.7, then the poly-checked script inside an IE conditional comment:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!--[if lte IE 8]> <script src="path/to/poly-checked.min.js"></script> <![endif]-->
Make sure to include all stylesheets before the script and that's all!
See live demo.
- Transparent to the developer, no need to add ugly polyfill classes to your CSS.
- Works with dynamically created checkbox/radio elements.
:checkedpseudo-class, changing an element's
checkedstate will automatically update its style.
- Keeps the same selector specifity as your original selectors.
- Bonus: extra patch for
:checkedto work with sibling selectors. Very useful for customized CSS checkboxes/radios.
Currently tested in IE 7 and 8.
Known limitations & workarounds
- Can't polyfill stylesheets from different domains. There's no CSSOM/DOM API to retrieve unrecognized selectors nor raw CSS text from a
<link rel="stylesheet">element, hence the polyfill uses XHR which is subject to the same-origin policy. The workaround is to host all stylesheets that require polyfilling in the same domain. Feel free to submit a PR or open an issue for discussion if you find a better alternative.
- Detecting dynamically added elements is done through polling, which may cause some FOUC. jQuery's
.clone(true)can be used on an already patched checkbox/radio to avoid the milliseconds of FOUC. It'd best if we could get rid of the polling altogether, but I haven't found any evented way to detect newly created input elements (in IE<=8). Feel free to open a PR/issue as usual if there's any better way to handle this in old IE.
- Does not polyfill dynamically added stylesheets. This is a rare use case and I don't feel like adding more DOM polling here, but it is very possible to implement a
polyCheckedParseNewStylesheetsfunction. Feel free to open a PR/issue to discuss it if you need this functionality.
- Does not polyfill the
option:checked). Option elements are rather limited and cross-browser inconsistent for styling, hence this is not one of my priorities. You can always use one of the thousands of styled select/combobox plugins available out there.