Miraculous :checked pseudo-class polyfill (for IE8 and below).
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="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpath%2Fto%2Fpoly-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.
- Full interoperability with JavaScript. Like the real
:checkedpseudo-class, changing an element'scheckedstate 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.
- 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
:checkedpseudo-class foroptionelements (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.