Copied to clipboard
 
 
 
 

How to get focus to work with IE

Here we experience Microsoft blatantly blowing off industry standards. We all know IE is mostly useless, but it still needs support. The CSS pseudo-class focus allows you to change the attributes of an element when the element has focus. This is a great pseudo-class, however, it does not work with any version of Internet Explorer without a hack.

On all browsers (excluding Internet Explorer), when the focus attribute is triggered on an element, it applies the pseudo-class with the following syntax (achieved by CSS or Javascript):

Code: Standards Compliant
document.getElementById('element').class
Internet Explorer requires a slightly different syntax:
Code: IE Only
document.getElementById('element').className

The subtle difference is 'class' vs. 'className' at the end of the statements. The same concept applies to an HTML document using CSS to focus an element or to simply apply a new class style.

In any case, below is the hack to allow elements to be focused properly with Internet Explorer. These attributes should only be loaded when Internet Explorer is the detected browser and should be loaded last. You can put the CSS code into an HTML file or external cascade sheet. The choice is yours but this example uses an external style sheet. Just be sure to tag it correctly if you embed it into HTML.

In the example code below, the hack would apply to any input (of type text) with the class name 'textbox'. The focus hack can be applied to any class in which focus is needed. If you need to apply focus to a password field, you will need to implicity state type password. Because of the nature of this hack, any element you wish to focus needs to have a class applied to it. In other words, you cannot apply this hack to all input fields by simply declaring input { ... } in your style sheet.

As a courtesy, you can copy the code to your clipboard by clicking inside the code box. Or you can download the file: gzip zip uncompressed.

Code: Class Attributes (CSS)
  1. /*   Filename: IE_focus_hack.css
  2. ------------------------------------------------------------*/
  3. input[type='text'].textbox {
  4.         border: 1px solid #CCCCB4;
  5.         background-color: #FFFFFF;
  6. }
  7.  
  8. input[type='text'].textbox-focus {
  9.         border: 1px solid #B3C59D;
  10.         background-color: #FFFFE0;
  11. }
  12.  
  13. input[type='text'].textbox {
  14.         focus: expression(
  15.                 this.onfocus = new Function ('this.className = "textbox-focus";'),
  16.                 this.onblur  = new Function ('this.className = "textbox";')
  17.         );
  18. }

 

Code: Style Sheet Link Relation (HTML)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>IE Focus Hack</title>
  6. <!--[if IE]>
  7. <link rel="stylesheet" href="/IE_focus_hack.css" type="text/css" media="screen" charset="utf-8" />
  8. <![endif]-->
  9. </head>
  10. <body>
  11. <p>This hack is for IE only</p>
  12. <input type="text" class="textbox" />&nbsp;&nbsp;
  13. <input type="text" class="textbox" />
  14. </body>
  15. </html>

Back to Top