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.

Blondy

I figure I'd add: meyerweb.com/eric/css/tests/css2/sec05-11-03.htm <- this page has a demonstration... when a text box has the cursor, it is "focused", and should turn pink. – Taranto

Good link. Try selecting the links in IE 7, no border, try in firefox - border. – Blondy

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

Ceratoid

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. – Blondy

@Blondy Schieber, since you're using jQuery, you can do a quick addition at page load, checking if you're dealing with MSIE, and add events for focus and blur with the same kind of idea that nandokakimoto is using. It does require a small change to your CSS as well. Check my answer for another approach. – Sunlit

@Ceratoid 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? – Mullinax

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. – Diskin

Answer 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>

Sunlit

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

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. – Sleepless

@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. – Sunlit

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

Fromm

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

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

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

Brundisium

Answer 5

It is better get help of javascript in this case

Legality

Answer 6

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 :(

Stotts