4 replies [Last post]
b3zra1y
Offline
newbie
Last seen: 13 years 15 weeks ago
Timezone: GMT-4
Joined: 2008-06-25
Posts: 4
Points: 0

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
Offline
Moderator
Brisbane
Last seen: 18 hours 6 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi b3zra1y, Here is a method

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.

b3zra1y
Offline
newbie
Last seen: 13 years 15 weeks ago
Timezone: GMT-4
Joined: 2008-06-25
Posts: 4
Points: 0

Thanks Tony. That

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
Offline
newbie
Last seen: 13 years 10 weeks ago
Joined: 2008-07-24
Posts: 7
Points: 0

How would I alter the script to also do textareas?

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

g1zmog0
Offline
newbie
dallas, texas
Last seen: 12 years 30 weeks ago
dallas, texas
Joined: 2009-03-23
Posts: 1
Points: 0

textarea along with input

I know this is a bit late... but i figured it could help someone else looking for the information. To answer webopolis question just change the word "INPUT" in the code to "TEXTAREA", then in the styles change "input.sffocus" to "textarea.sffocus", or add it alongside input.sffocus Here is any example:

sfFocus = function() {
var sfEls = document.getElementsByTagName("TEXTAREA");
for (var i=0; i

/* in your styles */
input:focus, input.sffocus, textarea.sffocus{
background-image: none;
background-color: #ffffff;
border: solid 1px #33677F;
}

Cheers*