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?

+2


a source to share


2 answers


I found this lovely piece of software:



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.

0


a source


If you are already addicted to javascript with your styles (otherwise none :focus

or .focus

works in IE6), I advise you to use IE7.js

by Dean Edwards which is js-enh ie6.



http://code.google.com/p/ie7-js/

0


a source







All Articles