Change Textfield border on click using Javascript

Im trying to change the text field border on clicking the field, only the script below doesnt work.
function highlight() {
 
	if (document.getElementById("fname").style.border=='1px solid #999999') {
	document.getElementById("fname").style.border='1px solid #BDB737';
	}
	else {
	document.getElementById("fname").style.border='1px solid #999999';
	}
 
}
 
 
<input name="textfield" type="text" id="fname" style="border:1px solid #999999; background-color: #FFFFFF; height:20px; font-size:14px ; padding:2px; color: #333333;" size="35" onclick="highlight();" />

Open in new window

agulaidAsked:
Who is Participating?
 
RobinConnect With a Mentor Software EngineerCommented:
You could use the onblur event:

function unhighlight()
{  
  document.getElementById("fname").style.border='#999999 1px solid';
}

and

<input name="textfield" type="text" id="fname" style="border:#99999 1px solid; background-color: #FFFFFF; height:20px; font-size:14px ; padding:2px; color: #333333;" size="35" onclick="highlight();" onblur="unhighlight();">
0
 
RobinSoftware EngineerCommented:
Try it like this:

function highlight()
{
  if (document.getElementById("fname").style.border=='#999999 1px solid') {
        document.getElementById("fname").style.border='#BDB737 1px solid';
      }
      else {
        document.getElementById("fname").style.border='#999999 1px solid';
      }
}
 
<input name="textfield" type="text" id="fname" style="border:#99999 1px solid; background-color: #FFFFFF; height:20px; font-size:14px ; padding:2px; color: #333333;" size="35" onclick="highlight();" />
0
 
agulaidAuthor Commented:
robinu

thanks, that works... How would i get it to remove the border upon clicking away? at the moment it highlights the field on click.
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.