Miraculous :checked pseudo-class polyfill (for IE8 and below)
JavaScript CSS
Permalink
Failed to load latest commit information.
demo improve some text; add live demo Oct 25, 2013
min Initial commit Oct 25, 2013
src Fix readme and source comments Jan 9, 2014
.gitignore Initial commit Oct 25, 2013
LICENSE Initial commit Oct 25, 2013
README.md Fix readme and source comments Jan 9, 2014

README.md

poly-checked

Miraculous :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.

Features

  • 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 :checked pseudo-class, changing an element's checked state will automatically update its style.
  • Keeps the same selector specifity as your original selectors.
  • Bonus: extra patch for :checked to work with sibling selectors. Very useful for customized CSS checkboxes/radios.

Compatibility

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 polyCheckedParseNewStylesheets function. Feel free to open a PR/issue to discuss it if you need this functionality.
  • Does not polyfill the :checked pseudo-class for option elements (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.