Unobstrusive pseudo-classes and attribute selectors emulation in IE

Posted by Álvaro G. Vicario on Stack Overflow See other posts from Stack Overflow or by Álvaro G. Vicario
Published on 2010-05-04T09:53:10Z Indexed on 2010/05/04 9:58 UTC
Read the original article Hit count: 172

I'm trying to emulate some pseudo-classes and attribute selectors in Internet Explorer 6 and 7, such as :focus, :hover or [type=text]. So far, I've managed to add a class name to the affected elements:

$("input, textarea, select")
.hover(function(){
    $(this).addClass("hover");
}, function(){
    $(this).removeClass("hover");
})
.focus(function(){
    $(this).addClass("focus");
})
.blur(function(){
    $(this).removeClass("focus");
});

$("input[type=text]").each(function(){
    $(this).addClass("text");
});

However, I'm still forced to duplicate selector in my style sheets:

textarea:focus, textarea.focus{
}

And, to make things worse, IE6 seems to ignore all the selectors when it finds an attribute:

input[type=text], input.text{
    /* IE6 ignores this */
}

And, of course, IE6 ignores selectors with multiple classes:

input.text.focus{
    /* IE6 ignores this */
}

So I'm likely to end up with this mess:

input[type=text]{
    /* Rules here */
}
input.text{
    /* Same rules again */
}
input[type=text]:focus{
}
input.text_and_focus{
}
input.text_and_hover{
}
input.text_and_focus_and_hover{
}

My question: is there any way to read the rules or computed style defined for a CSS selector and apply it to certain elements, so I only need to maintain one set of standard CSS?

© Stack Overflow or respective owner

Related posts about css

Related posts about internet-explorer