Last Updated: February 25, 2016
·
2.18K
· joaocunha

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

1 Response
Add your response

you may have meant input:checked, input:not(:checked) {...}</code>

over 1 year ago ·