Click here to Skip to main content
13,767,443 members
Click here to Skip to main content
Add your own
alternative version


31 bookmarked
Posted 23 Mar 2008
Licenced CPOL

Change Textbox/Input background color on focus

, 23 Mar 2008
Rate this:
Please Sign up or sign in to vote.
Change the background color of textbox and listbox when selected.



The sample code below illustrates how an onfocus background color change effect can be added to common 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 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 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.


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.

protected void Page_Load(object sender, EventArgs e) 
//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) 
    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) 

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


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


About the Author

Kunal Bagga
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( focuses on custom software development using .net technologies(, 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.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
sravani.v19-Apr-12 19:17
membersravani.v19-Apr-12 19:17 
QuestionThis is excaxtly what I am looking for! Pin
emann1114-Jan-12 12:58
memberemann1114-Jan-12 12:58 
GeneralAnother Method for TextBox Pin
Nanu Jogi20-Mar-10 3:45
memberNanu Jogi20-Mar-10 3:45 
QuestionHow can we use it in without master page Pin
sridhargcet2-Feb-09 21:35
membersridhargcet2-Feb-09 21:35 
Generalgood! it is what i need! Pin
Alenty23-Mar-08 15:44
memberAlenty23-Mar-08 15: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.181116.1 | Last Updated 23 Mar 2008
Article Copyright 2008 by Kunal Bagga
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid