Click here to Skip to main content
15,867,954 members
Articles / Web Development / ASP.NET
Article

Change Textbox/Input background color on focus

Rate me:
Please Sign up or sign in to vote.
4.23/5 (9 votes)
23 Mar 2008CPOL2 min read 127.3K   1.1K   30   5
Change the background color of asp.net textbox and listbox when selected.

textFocus.JPG

Introduction

The sample code below illustrates how an onfocus background color change effect can be added to common asp.net controls such as a TextBox or a ListBox. This effect can improve the user interface but is not included as a built in property in asp.net controls. The proposed solution works in both Internet Explorer and firefox. I have found other CSS techniques on the web that can achieve the same result but they do not work in Internet Explorer due to its lack of full support for CSS. The proposed strategy also works with nested master pages.

Attached is a simple asp.net web project that demonstrates the intended effect.

The figure above shows the background color of the textbox changing when it is selected(or brought in focus) by the user. The figure below shows the effect when the listbox is selected(in focus). As you can see the background color of the textbox is restored, while the background color of the listbox is yellow.

lbFocus.JPG

Using the code

Below is the main function from the master page. The master page consists of one main ContentPlaceHolder called ContentPlaceHolder1. The addBlurAtt function is called during Page_Load event of the master page. This function starts with the ContentPlaceHolder1 control and recursively goes through all child controls looking for controls of type TextBoxes or ListBoxes. When these controls are found, it adds attributes to them to call two different javascript functions on the onFocus and onBlur events.

C#
protected void Page_Load(object sender, EventArgs e) 
{ 
    addBlurAtt(ContentPlaceHolder1); 
} 
//recursive function that adds attribute to all child controls 
private void addBlurAtt(Control cntrl) 
{ 
    if (cntrl.Controls.Count > 0) 
    { 
        foreach (Control childControl in cntrl.Controls) 
        { 
            addBlurAtt(childControl); 
        } 
    } 
    if (cntrl.GetType() == typeof(TextBox)) 
    { 
        TextBox TempTextBox = (TextBox)cntrl; 
        TempTextBox.Attributes.Add("onFocus", "DoFocus(this);"); 
        TempTextBox.Attributes.Add("onBlur", "DoBlur(this);"); 
    } 
    if (cntrl.GetType() == typeof(ListBox)) 
    { 
        ListBox TempTextBox = (ListBox)cntrl; 
        TempTextBox.Attributes.Add("onFocus", "DoFocus(this);"); 
        TempTextBox.Attributes.Add("onBlur", "DoBlur(this);"); 
    } 
} 
Here are the two javascript functions DoFocus and DoBlur. These functions basically change the css class of the controls.
function DoBlur(fld) 
{
    fld.className='normalfld';
}

function DoFocus(fld) 
{
    fld.className = 'focusfld';
}
Below are the two classes used by the javascript functions.
.normalfld
{
    background-color: #FFFFFF;
}
.focusfld
{
    background-color: #FFFFCC;
}
I have been using this strategy in a my projects for a long time now. I have not seen any pitfalls.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder AuraTech
Singapore Singapore
Is the founder and chief architect of AuraTech, a Singapore based software consulting firm with presence in Singapore and Chicago. AuraTech(www.consultaura.com) focuses on custom software development using .net technologies(ASP.net, C#, VB, SQL Server), microsoft sharepoint and dynamics crm customizations.

Kunal got his bachelors and masters degrees in Computer Science from the University of Illinois - Urbana Champaign.

Comments and Discussions

 
GeneralMy vote of 5 Pin
sravani.v19-Apr-12 18:17
sravani.v19-Apr-12 18:17 
QuestionThis is excaxtly what I am looking for! Pin
emann1114-Jan-12 11:58
emann1114-Jan-12 11:58 
GeneralAnother Method for TextBox Pin
Nanu Jogi20-Mar-10 2:45
Nanu Jogi20-Mar-10 2:45 
QuestionHow can we use it in without master page Pin
sridhargcet2-Feb-09 20:35
sridhargcet2-Feb-09 20:35 
Generalgood! it is what i need! Pin
Alenty23-Mar-08 14:44
Alenty23-Mar-08 14:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.