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