Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save joaocunha/9320240 to your computer and use it in GitHub Desktop.
Save joaocunha/9320240 to your computer and use it in GitHub Desktop.
Simple feature detection for :checked pseudo-selector

If you have ever accessibly styled a checkbox/radio button using the :checked pseudo-selector, you know that IE8- don't support it. We usually have two options: either a custom Modernizr test or either a conditional IE class.

There's a simpler way to detect it and it doesn't rely on anything external:

/* hide the default element only on browsers that support :checked */
input:checked, input:not(checked) {
    display: none;
}
 
/* now you're free to style the label and IE8- will still have the original one */
input:checked + label {
    ...
}

@joaocunha

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment