Poor pseudo-classes and emulated attribute selectors in IE
I'm trying to imitate some pseudo-classes and attribute selectors in Internet Explorer 6 and 7, for example :focus
, :hover
or [type=text]
. So far, I've managed to add the class name for the affected items:
$("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 still have to duplicate the selector in my stylesheets:
textarea:focus, textarea.focus{
}
And to make matters worse, IE6 seems to ignore all selectors when it finds an attribute:
input[type=text], input.text{
/* IE6 ignores this */
}
And of course IE6 ignores the multi-class selector:
input.text.focus{
/* IE6 ignores this */
}
So, I will most likely end up in 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, is there a way to read the rules or computed style defined for a CSS selector and apply it to specific elements, so I only need to maintain one set of standard CSS?
a source to share
I found this lovely piece of software:
- ie-css3.js CSS3 pseudo -sector selector emulation for Internet Explorer 5.5 - 8
It mainly covers my requirements (unobtrusive code that doesn't require specific CSS rules), although it doesn't emulate input[type=text]
.
If you know anything else on this line, feel free to add a new answer.
a source to share