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

Advertisements

2 Responses to Highlighting input fields with CSS and JQuery

  1. Radio buttons and checkboxes don’t let themselves be highlighted easily. Even if you managed to color them, it the effect would be hard to spot.

    A way around this is to highlight not just the input element but also the label that goes with it. For this to work, first you have to mark up the label and associate it with the input element:

    Check box:

    In JSF this looks somewhat like so:

    Check box:

    The second step is some jQuery magic to make the label text change color when the input element has focus:

    $(“form :input”).focus(function() {
    $(“label[for='” + this.id + “‘]”).addClass(“labelfocus”);
    }).blur(function() {
    $(“label”).removeClass(“labelfocus”);
    });

    References:
    http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_outputLabel.html
    http://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: