Click here to Skip to main content
11,796,774 members (70,229 online)
Click here to Skip to main content

Change the background color of the currently focused element

, 31 Aug 2006 CPOL 121.1K 431 9
Rate this:
Please Sign up or sign in to vote.
How to change the background color of the currently focused element when the user tabs off.

Sample Image - focusBGColor.jpg


When the user tabs off from an element, browsers by default just draw a border around the focused element. Sometimes it is hard to notice and if we want to help the user to find this easily, we can change the background color of the currently focused element. It will help them easily identify the focused element.

How do we do this?

We need some JavaScript to set and reset the background color.

var bkColor = "red";
function getEvent(e){
  if(window.event != null) {
    return event;
  return e;
function setBKColor(e){
 e = getEvent(e);
 var src =  e.srcElement ||;
 if(src != null) { =; = bkColor;
function reSetBKColor(e){
 e = getEvent(e);
 var src =  e.srcElement ||;
 if(src != null) { =;

You can set any color for the global variable bkColor which will be used for setting the background color. You can use an RGB color code or a color name such as red, blue, green, etc. I have assigned red as my focus background color.

setBKColor will be assigned to the onFocus event. Whenever the element receives focus, the browser will call this method. In that method, we store the original bkColor in a temp variable and we just set the global bkColor variable to the current element's background color.

reSetBKColor will be assigned to the onBlur event. Whenever the element loses focus, the browser will call this method. In that method, we just set the temp bkColor to the current element's background color, and it will reset to the original background color.

We can directly assign those JavaScripts to every HTML form element tag or write a global event handler to attach the event to all form elements.

I will show you both ways.

Adding to the HTML tag:

<input type="text" onfocus="setBkColor(event);" onblur="reSetBKColor(event);"
<input type="radio" id= "rd1" onfocus="setBkColor(event);" onblur="reSetBKColor(event);"

If you like to add a global handler:

<script language="javascript">
function attachEvent(name,element,callBack) {
    if (element.addEventListener) {
      element.addEventListener(name, callBack,false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + name, callBack);

function setListner(eve,func) {
   var ele = document.forms[0].elements;
   for(var i = 0; i < ele.length;i++) {
    element = ele[i];
    if (element.type) {
      switch (element.type) {
        case 'checkbox':
        case 'radio':
        case 'password':
        case 'text':
        case 'textarea':
        case 'select-one':
        case 'select-multiple':

We need to call the setListner function for the focus and blur functions. It will loop through all elements and attach the particular function (second argument) to the event (first argument).

Now if you launch the HTML and tab off from one field to another or click inside a field, you will see the previous element's bkColor reset to the original bkColor and the focused element will change to the new bkColor.


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


About the Author

senthil karuppaiah
Web Developer
United States United States
Fourteen years of progressive experience in Software Product Development, tactical planning, project and client management, demonstrated success in leadership, critical thinking, problem solving and analysis. Diverse knowledge and experience with multiple development methodologies, reengineering, software engineering, and integration of heterogeneous systems.

You may also be interested in...

Comments and Discussions

Questionjava files in a folder outside ... Pin
walterix29-Feb-12 6:29
memberwalterix29-Feb-12 6:29 
Questionbackground color change to the disabled and readOnly fields Pin
Space_b17-Sep-10 18:45
memberSpace_b17-Sep-10 18:45 
Generalit doesnt work with UpdatePanel Pin
Selcuk OZDOGAN18-Feb-09 3:57
memberSelcuk OZDOGAN18-Feb-09 3:57 
Questiondoes it work without a form tag? Pin
Alderaic-5-Sep-06 3:16
memberAlderaic-5-Sep-06 3:16 
QuestionOnly for IE ? Pin
stevejebson29-Aug-06 21:57
memberstevejebson29-Aug-06 21:57 
AnswerRe: Only for IE ? Pin
senthil karuppaiah31-Aug-06 6:17
membersenthil karuppaiah31-Aug-06 6:17 
GeneralNice one [modified] Pin
Ramesh Ramalingam20-Aug-06 19:38
memberRamesh Ramalingam20-Aug-06 19:38 
GeneralRe: Nice one Pin
senthil karuppaiah21-Aug-06 4:16
membersenthil karuppaiah21-Aug-06 4:16 
GeneralRe: Nice one Pin
Ramesh Ramalingam21-Aug-06 18:20
memberRamesh Ramalingam21-Aug-06 18:20 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151002.1 | Last Updated 31 Aug 2006
Article Copyright 2006 by senthil karuppaiah
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid