Change label color on input focus

Forum Moderators: open

Message Too Old, No Replies

Change label color on input focus

Rain_Lover

6:23 pm on Jun 7, 2012 (gmt 0)

Hi,

Here's a sample form:

<!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>

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

DrDoc

7:47 pm on Jun 7, 2012 (gmt 0)

If you are using jQuery, it's quite easy, since it allows you to check for previous siblings of a given type with minimal effort.

Otherwise, simply wrap your

<label>

_around_ your input, and change the background of the parent node.

birdbrain

9:51 am on Jun 8, 2012 (gmt 0)

Hi there Rain_Lover,

as CSS seems to be ineffective for this task, try this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Sample Form</title>

<style type="text/css">
.focused {
    background-color:#fdb;
  }
</style>

<script type="text/javascript">

function init(){
   inp=document.getElementsByTagName('input');
for(c=0;c<inp.length;c++){
inp[c].onfocus=function() {

if(this.previousSibling.nodeName=='LABEL'){

   this.previousSibling.className='focused';

this.onblur=function() {
   this.previousSibling.className='';
        }
       }
     }
   }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

</script>

</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>

birdbrain

Fotiman

1:41 pm on Jun 8, 2012 (gmt 0)

A better method might be to look for the label element that has the for attribute that matches the input's id attribute. That way, it's not dependent on a rigid layout and you won't need to worry if you ever change your markup.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.focused {
  background-color: #fdb;
}
</style>
<title>Sample Form</title>
</head>
<body>
<form action="#">
  <div>
    <div><label for="fname">First name</label><input type="text" id="fname"></div>
    <div><label for="lname">Last name</label><input type="text" id="lname"></div>
  </div>
</form>
<script>
(function () {
  var i,
    j,
    inputEls = document.getElementsByTagName('input'),
    labelEls = document.getElementsByTagName('label');
  
  function attachFocusHandler(inputEl, labelEl) {
    inputEl.onfocus = function () {
      labelEl.className = labelEl.className + ' focused';
    };
    inputEl.onblur = function () {
      labelEl.className = labelEl.className.replace('focused', '');
    };
  }
  
  for (i = 0; i < inputEls.length; i++) {
    for (j = 0; j < labelEls.length; j++) {
      if (inputEls[i].id === labelEls[j].getAttribute("for")) {
        attachFocusHandler(inputEls[i], labelEls[j]);
        break;
      }
    }
  }
})();
</script>
</body>
</html>

[edited by: Fotiman at 1:43 pm (utc) on Jun 8, 2012]

Rain_Lover

1:42 pm on Jun 8, 2012 (gmt 0)

Works like a charm! Thanks for your time! :)

Rain_Lover

2:15 pm on Jun 8, 2012 (gmt 0)

Fotiman and I were posting at the same time. LOL!
My sincere thanks goes to both of you! Now I have good ideas for my real form.