jquery - IE7 input:focus

Question

I have the following CSS which isn't working in IE7.

input:focus{border-width: 2px;border-color: Blue; border-style: solid;}

Basically, I just want to set the border attributes when the input is focused. Works in Firefox etc... If anyone could explain why it isn't working in IE 7 and suggest a possible workaround it would be appreciated. Thanks.

Answer 1

I understand the desire to not add events, but in this case it looks like MSIE7 is jerk on this point and needs to be hacked around. In your comment to @Ape-inago you indicate you're using jQuery. Here's a solution in jQuery. I tested this in MSIE 6 and 7, and it appears to do what you want.

<script type="text/javascript">
$(document).ready(function(){
    if (jQuery.browser.msie === true) {
        jQuery('input')
            .bind('focus', function() {
                $(this).addClass('ieFocusHack');
            }).bind('blur', function() {
                $(this).removeClass('ieFocusHack');
            });
    }

});
</script>
<style>
input:focus, input.ieFocusHack
{
    border-width: 2px;
    border-color: Blue;
    border-style: solid;
}
</style>