Skip to content
Miraculous :checked pseudo-class polyfill (for IE8 and below)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
min
src
.gitignore
LICENSE
README.md

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.
You can’t perform that action at this time.