• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 646
  • Last Modified:

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.
1 Solution
Maybe you can use this:
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";
#myText {
	border: 1px solid #000;
<input name="myText" id="myText" onfocus="toggleFocus(this);" onblur="toggleFocus(this);>

Open in new window

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?

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now