Highlighting input fields with CSS and JQuery


The interface of our current Web Application is rather complex and contains loads of fields. The end users wanted us to make the active field or element more visible. The only hitch is that the supported browsers are IE7, IE8 and Firefox 3.6+.

The CSS dynamic pseudo-class :focus should have done the trick. The :focus selector is supported as such by Firefox, Chrome and IE9.

Here is an example of how to use it. Don’t pay attention to the ugliness of the outcome :-). In the case of the check box and radion I could only manage to change the border style and width and not the colour.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
input:focus, textarea:focus, select:focus {
        background: #FFFFCC;
        border: 2px solid red
}
</style>
</head>

<body>
            Text Field: <input type="text" /><br />
            Password Field: <input type="password" /><br />
            Text Area: <textarea></textarea><br />
            Radio Button: <input type="radio" /><br />
            Check box: <input type="checkbox" /><br />
            Button: <input type="submit" value="Submit" /><br />
            Select box:<select>
                                  <option>One</option>
                                  <option>Two</option>
                                  <option>Three</option>
                                  </select> <br />
</body>
</html>

To make it work in IE8, the page must declare a <!DOCTYPE>, as illustrated below. Furthermore, one must disable the compatibility view settings for the Web site in order to have the CSS working. Go to Tools->Compatibility View Settings and uncheck the adequate check boxes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Unfortunately, that does not work in IE7. However, I found a JQuery plugin that makes it work with IE7 at http://james.padolsey.com/javascript/fixing-focus-in-internet-explorer/. The only problem that I found was with select, that does not work.

Here is an example of how to use it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
input:focus, textarea:focus, select:focus {
        background: #FFFFCC;
        border: 2px solid red
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="pseudofocus.js"></script>

</head>

<body>
            Text Field: <input type="text" /><br />
            Password Field: <input type="password" /><br />
            Text Area: <textarea></textarea><br />
            Radio Button: <input type="radio" /><br />
            Check box: <input type="checkbox" /><br />
            Button: <input type="submit" value="Submit" /><br />
            Select box:<select>
                                  <option>One</option>
                                  <option>Two</option>
                                  <option>Three</option>
                                  </select> <br />
        <script type="text/javascript">
            $.pseudoFocus();
        </script>
</body>
</html>

Links

%d bloggers like this: