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
Mon, 2008-06-30 12:58
#1
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.
Tue, 2008-07-08 13:34
#2
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
Thu, 2008-07-24 19:02
#3
How would I alter the script to also do textareas?
This works great for inputs, but I need it to do textareas too. Suggestions?
Mon, 2009-03-23 19:30
#4
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*