ASP.NET CSS Highlight TextBox on Focus

Many sites have a useful visual way to show the user what TextBox (input text control) is currently focused or selected by highlighting the background of the control with a color such as yellow. When you tab or click into the TextBox, the border and background usually change to denote it has focus.

Here is what the TextBox should look like when it is focused and unfocused after applying this trick:



Un-Focused TextBox
unfocused textbox

Focused TextBox
focused textbox

There is an easy CSS trick that will get this working in Firefox and Safari with no need for Javascript but unfortunately, IE 6 & 7 do not support this CSS instruction. So we have to add a bit of javascript to make this work. First, add the CSS class that you want to use when the control has focus and when it is unfocused. Here are a couple of examples of CSS properties to use (NOTE: You can add this code to your page's HEAD tag or to your external CSS style sheet):

   1:  /* This is the CSS class to use when no focus is on the input control */
   2:  .input_text
   3:  {
   4:      border:1px solid #c0c0c0;
   5:      padding:4px;
   6:      font-size:14px;
   7:      color:#000000;
   8:      background-color:#ffffff;
   9:  }
  10:   
  11:  /* This is the CSS class to use when the control has focus */
  12:  .input_text:focus, input.input_text_focus
  13:  {
  14:      border-color:#646464;
  15:      background-color:#ffffc0;
  16:  }

 

Next, here is the Javascript that you can use to attach an "onFocus" and an "onBlur" event to all input controls on your page that match certain conditions. Add this Javascript to your page's HEAD tag or in an external .js file:

   1:  // creates a function to set the css class name of input controls when they
   2:  // receive or lose focus.
   3:  setAspnetTextFocus = function() {
   4:      // CSS class name to use when no focus is on the input control
   5:      var classBlur = 'input_text';
   6:      // CSS class name to use when the input control has focus
   7:      var classFocus = 'input_text_focus';
   8:      // get all of the input tags on the page
   9:      var inputElements = document.getElementsByTagName('input');
  10:      
  11:      for (var i = 0; i < inputElements.length; i++) {
  12:          // add the onfocus event and set it to add the on focused CSS class
  13:          inputElements[i].onfocus = function() {
  14:              if (this.className == 'input_text') {
  15:                  this.className += ' ' + classFocus;
  16:              }
  17:          }
  18:          // add the onblur event and set it to remove the on focused CSS class when it loses focus
  19:          inputElements[i].onblur = function() {
  20:              this.className = this.className.replace(new RegExp(' ' + classFocus + '\\b'), '');
  21:          }
  22:      }
  23:  }
  24:  // attach this event on load of the page
  25:  if (window.attachEvent) window.attachEvent('onload', setAspnetTextFocus);

 

Now, add a TextBox control to your page with the following attributes:

   1:  <!-- This text box will highlight when it receives focus. -->
   2:  <asp:TextBox ID="TextBox1" runat="server" CssClass="input_text"></asp:TextBox>

 

Now build and run to try out your new TextBox. I have tested this in Firefox 2, Safari 2, and IE 6 & 7.

Date of the article

Submitted by Anonymous on Tue, 01/24/2012 - 09:01.

Where is the date of the article?

css on focus is not working

Submitted by Anonymous on Fri, 09/02/2011 - 06:40.

i don't under stand this input.input_text_focus line

Thank youu..soo much

Submitted by Anonymous on Wed, 04/20/2011 - 00:51.

Hi..
This solved my problem ..
thanks a lot..
god bless u.

Doesn't work on my IE8

Submitted by Anonymous on Tue, 04/13/2010 - 06:50.

Not working with Javascript or without!

change back ground color of text box on focus

Submitted by Anonymous on Mon, 04/05/2010 - 17:01.

It doesn't work when the page post backs

it's worked

Submitted by Anonymous on Fri, 03/25/2011 - 01:25.

put this code in you page_load
RegisterStartupScript("textOnFocus", "javascript:setAspnetTextFocus();");

Javascript is still there

Submitted by Anonymous on Tue, 03/30/2010 - 02:06.

Mr anonymous you mislead my google search with your stupid post !!

ie8 works fine without javascript

Submitted by Anonymous on Mon, 11/30/2009 - 14:58.

excellent work,
it works very good !
thanks

Thanks

Submitted by Anonymous on Tue, 03/16/2010 - 20:28.

Works beautifully! Tried it with IE tester.

Thanks

Submitted by Anonymous on Sat, 08/28/2010 - 00:28.

I used it and it worked just right with IE 8.