Change label color on input focus

@Rain_LoverJun 07.2012

Hi,

Here’s a sample form:

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <title>Sample Form</title> </head> <body> <form action=”#”> <label for=”fname”>First name</label><input type=”text” id=”fname”> <br> <label for=”lname”>Last name</label><input type=”text” id=”lname”> </form> </body> </html>[/CODE]

I wonder how I can change the label color when I focus/tab on its text filed? How can I do it through JavaScript if CSS doesn’t work here?

Thanks in advance!
Mike

to post a comment

JavaScript

@PadonakJun 07.2012 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Sample Form</title>
 <style type="text/css">
 body{text-align:center;font-family:Georgia,Verdana,Arial;font-size:13px;background-color:#fff;color:#000;padding:150px 0px 0px 0px;margin:0px 0px 0px 0px;}
 input{margin-left:15px;}
 .lab_idle{color:#000;background-color:transparent;}
 .lab_active{color:Crimson;background-color:transparent;}
 </style>
 <script type="text/javascript">
 function setInputs(){
 var frm=document.myform;
 frm.fname.onfocus=frm.lname.onfocus=function(){this.previousSibling.className='lab_active';}
 frm.fname.onblur=frm.lname.onblur=function(){this.previousSibling.className='lab_idle';}
 }
 window.onload=setInputs;
 </script>
 </head>
 <body>
 <form name="myform" action="">
 <label for="fname">First name</label><input type="text" id="fname" name="fname">
 <br>
 <label for="lname">Last name</label><input type="text" id="lname" name="lname">
 </form>
 </body>
 </html>[/CODE]

@Rain_LoverauthorJun 08.2012 — #Thanks!

[I]previousSibling[/I] is a clever idea!

@JMRKERJun 09.2012 — #Why the cross-forum posts?

See: http://www.codingforums.com/showthread.php?t=263909

Also could do this for same effect...

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Sample Form&lt;/title&gt;
 &lt;style type="text/css"&gt;
 
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action="#" onsubmit="return false"&gt;
 &lt;label id="fname"&gt;First name
 &lt;input type="text"
 onfocus="document.getElementById('fname').style.color='orange'"
 onblur="document.getElementById('fname').style.color='black'"&gt;&lt;/label&gt;
 &lt;br&gt;
 &lt;label id="lname"&gt;Last name
 &lt;input type="text"
 onfocus="document.getElementById('lname').style.color='orange'"
 onblur="document.getElementById('lname').style.color='black'"&gt;&lt;/label&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Change label color on input focus

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Change label color on input focus

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴