change form fields onfocus and onblur

Hi - I'd like to change the border and background color of form fields when the user clicks on them, or tabs to them.  Then when the user clicks away,  the form field reverts to its previous look.  
Can someone please show me how this is done?
TIA your input.
d2
dzash2000Asked:
Who is Participating?
 
JoachimMartinsenCommented:
Maybe you can use this:
<script>
function toggleFocus(theElement) {
	if ( theElement.style.backgroundColor == "lightgrey" ) {
		theElement.style.backgroundColor = "white";
		theElement.style.borderColor = "black";
	}
	else {
		theElement.style.backgroundColor = "lightgrey";
		theElement.style.borderColor = "red";
	}
}
</script>
<style>
#myText {
	border: 1px solid #000;
}
</style>
 
<input name="myText" id="myText" onfocus="toggleFocus(this);" onblur="toggleFocus(this);>

Open in new window

0
 
dzash2000Author Commented:
JoachimMartin - this works on text fields.  
I guess I should have stated form elements instead of form fields.
Is it possible to make it work just as well on other types of form elements - like select lists, check boxes?
d2
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.