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.

Solution 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

Solution 2

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>

Solution 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");
    }
});

Solution 4

It is better get help of javascript in this case

Solution 5

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

View more solutions

Comments

[Rob]

Thanks for confirming it as a problem. I'm using jquery, so I can implement the code using javascript if I need to. I would rather not do that though because my page is rather saturated with events already. I'm hoping for a css solution or hack that would work.

[James McMahon]

I can't vote you up due to some buggy behavior in SO but this does work, thanks for the answer.

[vol7ron]

This is a very old question, but if you're going to go this route, why use CSS:focus for one and a class for the other? Why not use the same method for both and rid yourself of the input:focus? That way when it breaks, you'll know to fix for all browsers and not have more than one method to clean up - there's a small performance penalty for browsers that support the CSS event, but there's also a small performance penalty for the if block. Also, why not just do if (jQuery.browser.msie)? The extra lengths to verify the datatype and value are unnecessary for something jQuery controls.

[artlung]

@vol7tron I'm not understanding what your objections are. Adding a class are to support IE. Testing for MSIE in jQuery seems appropriate, though I don't know if the fix is necessary now, a year and a half later for IE6, IE7, IE8, IE9. I suggest you add a new answer if you have a more complete solution.

[andersra]

@nandokakimoto What does the syntax for " sffocus=function(){} " mean exactly? I am trying to figure out what this is doing here. Also this needs to go in script tags correct?

[Rimer]

It means: Assign as the value of sfFocus a function() with the following {definition}... to later be called by sfFocus(); Yes it needs to be in script tags, as it is Javascript code.

[smm]

Use of $.browser is also deprecated from jQuery 1.3+ and removed in 1.9

[Fredrik C]

This is an issue where browser detection makes more sense than feature detection as there is no good way to detect this.