Share this page 

Nice "focus" effect in a FORM fieldTag(s): Form


In CSS, the :focus pseudo-class can be used to apply styles to a page element that receives focus.

IE doesn't recognise this at all, you need add the style "manually".

In this HowTo, the special javascript function to init the style is called (from the BODY onLoad) only if the browser is IE. 

<html>
<head>
<script>
  function initie() {
    //
    // called from the BODY onLoad with IE only.
    // for mozilla-based browser only the CSS is used.
    //  
    var i = 0;
    // get all the forms
    var f = document.forms[i];
    while (f) {
       //alert(f.name);
       // get all elements of the current form
       var elem = document.forms[i].elements;
       for (var i = 0; i < elem.length; i++) {
           // make a reference to our style
           elem[i].onfocus = function() {
                   this.className += ' focusie';
                   }
           elem[i].onblur = function() {
                   this.className = this.className.replace('focusie', '');
                   }
       }
       // next form if any
       f = document.forms[++i];
    }
  }
</script>
<style>
/* mozilla */ 
input:focus, textarea:focus  {
background-color: lightblue;
}

/* ie */
input.focusie, textarea.focusie {
background-color: lightblue;
}
</style>

</head>

<!--[if IE]>
<body onload="initie();">
<![endif]-->
<!--[if !IE]> <-->
<body>
<!--> <![endif]-->

<form name='test'>
<LABEL FOR="tf1">Name </LABEL><br>
<input id="tf1" type="text" size="40">
<p>
<LABEL FOR="tf2">Email </LABEL><br>
<input id="tf2" type="text" size="40">
<p>
<LABEL FOR="tf3">Comments </LABEL><br>
<textarea id="tf3" rows="5" name="comments" cols="45" wrap="virtual"></textarea></p>

<p><input type="submit" value="Submit"></p>
</form>

</body>
</html>
Try it here :