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

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 2

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;
}

Answer 3

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 4

it ALMOST works

The problem with this is that when the element in question has focus and you open another window and then return to the page with the element in question on it, it is styled incorrectly :(

Answer 5

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 6

It is better get help of javascript in this case