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
Written by João Cunha
Related protips
1 Response
you may have meant input:checked, input:not(:checked) {...}</code>
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#