CSS Examples 
:focus pseudo class (highlight form element onFocus)
Author: CSS Drive
The ":focus" CSS puesdo class applies the style to an element when the user sets focus on it. Using it, for example, you can easily highlight the form element the user is currently typing in. Note that ":focus" is currently not supported in Internet Explorer (as of IE 6.0), but is in Mozilla/ NS7+.
The HTML:
<form>
<p>1) Name:<br />
<input type="text" size="40"></p>
<p>2) Email address:<br />
<input type="text" size="40"></p>
<p>3) Comments:<br />
<textarea rows="5" name="comments" cols="45" wrap="virtual"></textarea></p>
<p><input id="actualsubmit" type="submit" value="Submit"></p>
</form>
The CSS:
input:focus, textarea:focus{
background-color: lightyellow;
}
Comments (14)
I was wondering if anybody knew how to make this work in Internet Explorer 6.0.
http://www.pluginlab.com/email_contact.asp?tab=0
The link above shows a form where when you click on the text field it gradually turns to white. If anybody can help me do this it be cool thanks.
That page uses javascript to accomplish it. I would tell you how, but I don't know if that is entirely legal.
Mario i checked the link you given i found that it is used with help of javascript and linking it with css i havent suceeded in sorting it out hope i able to explain as soon as i can
Mario, it was bugging me as well, after seeing the elegant approach integrating javascript and css in CSS Examples: 2-level CSS Drop Down Menu
Date: 12/09/2004 2-level CSS Drop Down Menu http://www.cssdrive.com/index.php/examples/exampleitem/css_drop_down_menu/
I looked into the same for this one. The highlighting javascript code for ie was used from
http://www.dynamicdrive.com/dynamicindex11/highlightform.htm
and modified it so that it better modeled a css approach.
Only one change in the first line of the HTML, that is, to assign an ID to the form
The HTML:
<form id="cssdropdown">
1) Name:
<input type="text" size="40"></p>
2) Email address:
<input type="text" size="40"></p>
3) Comments:
<textarea rows="5" name="comments" cols="45" wrap="virtual"></textarea>
<input type="button" value="Submit"></p>
</form>
The CSS and [removed]
<style type="text/css">
input:focus, textarea:focus{
background-color: lightyellow;
}
</style>
<script language="javascript">
//Highlight form element- © Dynamic Drive (http://www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
var highlightcolor="lightyellow"
var ns6=document.getElementById&&!document.all
var previous=''
var eventobj
//Regular expression to highlight only form elements
var intended=/INPUT|TEXTAREA|SELECT|OPTION/
//Function to check whether element clicked is form element
function checkel(which){
if (which.style&&intended;.test(which.tagName)){
if (ns6&&eventobj;.nodeType==3)
eventobj=eventobj[removed][removed]
return true
}
else
return false
}
//Function to highlight form element
startList = function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=''){
if (checkel(previous))
previous.style.backgroundColor=''
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}
startAll = function startJavascriptAfterPageInits() { document.getElementById("cssdropdown").onclick=startList;
document.getElementById("cssdropdown").onkeyup=startList;
}
if (window.attachEvent)
window.attachEvent("onload", startAll);
else
window.onload=startAll;
</script>
Its not perfect as it highlights buttons, but we're on our way, and works in both firefox/ie 6.
http://evolt.org/node/28553 has a function for form validation. as mentioned above, FF can use CSS to apply a style to a form focus field ... IE can not. but, all this extra stuff might be great, but try something as simple as this: add 2 lines to the evolt.org function
focusField.style["backgroundColor"]='#0000ff';
focusField.style["color"]='#ffffff';
and shazam, you get form focus style in IE
It doesn't work at IE-6 ...
Still doesn't know why?
does anybody knows the solution for IE-6??
For IE, I did this:
input:focus, textarea:focus, input:hover{
background-color: lightyellow;
}
This page DOES NOT display input that changes on focus on the computer I am using with windows xp sp2 through IE7.
However, it DOES WORK on mozilla firefox version 2.0.0.4 - the only other browser with which I attempted to view this page.
It doesn't work at IE-6 ...
...Joey... + ...租車...
Please read the actual page before commenting!
From the top of this page;
"... Note that ":focus" is currently not supported in Internet Explorer (as of IE 6.0) ..."
