? IE6 Focus bug - a simple answer

b3zra1y
avatar
rank newbie

newbie


Posts: 4
Joined: 2008-06-25

Posted: Mon, 2008-06-30 12:31

Hello:

My project requires IE6.

To enhance the user experience, I'd like to have input fields change background color on focus... but I know the IE6 implementation prevents the normal approach to this:

input:focus{
background-color:#DEEFFF;
}

I've seen some threads addressing this problem (e.g., http://csscreator.com/node/17498)
... but they do not presenet a clear and consise answer (or list of options).

Can someone demysitfy this for me and help point me (and others who will search for this too!) to what - SPECIFICALLY - I can do to address this issue.

THNX

Tony
Tony's picture
rank Moderator

Moderator


Posts: 2750
Joined: 2003-03-12
Location: Brisbane

Hi b3zra1y, Here is a method

Posted: Mon, 2008-06-30 12:58

Hi b3zra1y,
Here is a method that should work taken from http://htmldog.com/articles/suckerfish/focus/.

Add this JavaScript to your page:

sfFocus = function() {
	var sfEls = document.getElementsByTagName("INPUT");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onfocus=function() {
			this.className+=" sffocus";
		}
		sfEls[i].onblur=function() {
			this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

and add this to your styles:
input:focus, input.sffocus{
background-color:#DEEFFF;
}

The JavaScript add the class to input elements when they are in focus.
The CSS sets the background-color of inputs on focus.

Your question may have already been answered, search and read before you ask.

b3zra1y
b3zra1y's picture
rank newbie

newbie


Posts: 4
Joined: 2008-06-25

Thanks Tony. That

Posted: Tue, 2008-07-08 13:34

Thanks Tony.

That works.
But I have some disabled fields that we've grayed out.
So I need to revert the INPUT background color to the original when I leave the field.

This is more of a javascript question, but do you know the syntax for grabbing that information, storing it, and applying it back to the field when focus is lost ?

thx

webopolis
webopolis's picture
rank newbie

newbie


Posts: 7
Joined: 2008-07-24

How would I alter the script to also do textareas?

Posted: Thu, 2008-07-24 19:02

This works great for inputs, but I need it to do textareas too. Suggestions?