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>

Answer 2

A known answer for this problem is using the following code:

    sfFocus = function() {
    var sfEls = document.getElementsByTagName("INPUT");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onfocus=function() {
            this.className+=" sffocus";
        }
        sfEls[i].onblur=function() {
            this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
        }
    }}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

And here is the css style

input:focus, input.sffocus{background-color:#DEEFFF;}

The problem is that IE doesn't recognise that style at all.

EDIT: You can find a solution using prototype here: http://codesnippets.joyent.com/posts/show/1837

Answer 3

If you're using jQuery 1.7+ then you'll find the use of 'Live' is no longer recommended, the new alternative is '.on' so the code #DotNetWise has used above would read:

$.browser.msie && $.browser.version < 8 && $("input,select,textarea").on({
    focus: function(){
        $(this).removeClass("blur").addClass("focus");
    },
    blur: function(){
        $(this).removeClass("focus").addClass("blur");
    }
});

Answer 4

A jQuery simpler and nicer solution that works for every input, even for those dynamically attached later:

 $.browser.msie && $.browser.version < 8 && $("input,select,textarea").live("focus", function(){
   $(this).removeClass("blur").addClass("focus"); 
}).live("blur", function() { 
   $(this).removeClass("focus").addClass("blur"); 
});

CSS example:

input[type='text']:focus, input[type='text'].focus {
   border: 1px solid red;
}