Outlining textbox input fields (and getting it to work in IE)

While using Google GMail today, I noticed that they put a blue highlighting around the text input boxes when they have input focus. It’s a nice touch that makes it just a bit easier for users to identify which field their typing in. (Safari users, of course, get this on all web sites out of the box.)

Getting this to work on your web site is a simple matter of applying some CSS styles. The trick is to give your normal inputs fields a 1px border and a 1px margin; then, when they have focus, give them a 2px border (with a different color if you so choose) and no margin. This will ensure the dimensions of the element don’t change when the border width changes.

The following CSS provides an example of styling text boxes (both text and password inputs, and multi-line text boxes) and select lists (single and multi-line) with an alternate outline when holding the input focus.

input[type=text], input[type=password], textarea, select {
border-top: solid 1px #8e8e8e;
border-right: solid 1px #d1d1d1;
border-left: solid 1px #d1d1d1;
border-bottom: solid 1px #e4e4e4;
margin: 1px;
padding: 2px;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
border-color: #4488cc;
border-style: solid;
border-width: 2px;
margin: 0;
}

Like many good web tricks, this’ll look great in Firefox but won’t do anything in Internet Explorer. That’s because IE (through version 7) doesn’t support attribute selectors (as in [type=text]) or the :focus selector. To get things to work in IE, we need to rely on a little more CSS and some JavaScript.

The first thing to do is update our CSS. We’ll create a new iefocus class that, when applied, will put the border around our fields. (Of course, you should just add this to the end of the above CSS declaration to save space, but I present it separately below so you can follow along.)

.iefocus {
border-color: #4488cc;
border-style: solid;
border-width: 2px;
margin: 0;
}

The next step is to figure out how to tell IE — and only IE — to apply the iefocus class to elements fields when they get focus, and to remove the iefocus class when they lose focus (“blur”).

To do that, we use JavaScript. The snippet below uses jQuery to apply the behavior we want.

<!--&#91;if LTE IE 7&#93;>
<script type="text/javascript">
	function ApplyIEFormStyles()
	{
		jQuery(':text,:password,textarea,select').focus(function() {
			jQuery(this).addClass('focus');
		}).blur(function() {
			jQuery(this).removeClass('focus');
		});
	}
	jQuery(document).ready(ApplyIEFormStyles);
</script>
< !&#91;endif&#93;-->

The conditional comments around the script block ensure the code only runs in Internet Explorer (through version 7).

The above code works great, but I found one weird caveat: If your page uses ASP.Net AJAX, and you have an UpdatePanel on the page, the behavior disappears after an asynchronous postback. There’s a fix for that, fortunately — we hook the same method (ApplyIEFormStyles) to a handler that is fired after each ASP.Net AJAX asynchronous event ends.

The final JavaScript follows.

<!--&#91;if LTE IE 7&#93;>
<script type="text/javascript">
	function ApplyIEFormStyles()
	{
		jQuery(':text,:password,textarea,select').focus(function() {
			jQuery(this).addClass('focus');
		}).blur(function() {
			jQuery(this).removeClass('focus');
		});
	}
	jQuery(document).ready(ApplyIEFormStyles);
	if (Sys != null)
	{
		Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ApplyIEFormStyles);
	}
</script>
< !&#91;endif&#93;-->

That should do it — resolving the rendering issues in IE, and giving your users a little more usability when working through your web forms.

6 thoughts on “Outlining textbox input fields (and getting it to work in IE)”

  • Khor Yong Chen says:

    Hi,
    Thanks for the great article for using outline on focused textbox.
    I had your code running successfully in Firefox but not IE7.
    I added the last IF condition into the script and it broke.

    # if (Sys != null)
    # {
    # Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ApplyIEFormStyles);
    # }

    It gave me an error message “Microsoft JScript runtime error: ‘Sys.WebForms.PageRequestManager’ is null or not an object”
    what I did wrong here? Thanks a million for your help.

  • I had the same problem and the change of code didn’t help – asp 2, visual studio 2005
    what version of jquery are you using?

  • Hi …
    I m using it with vs 2008 with framework 2.O …. It is not working ….. Where is jQuery Class… How will we access it …

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>