Welcome to WebmasterWorld Guest from 54.145.208.64

Forum Moderators: open

Message Too Old, No Replies

Change label color on input focus

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

5+ Year Member Top Contributors Of The Month



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
7:47 pm on Jun 7, 2012 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
9:51 am on Jun 8, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
1:41 pm on Jun 8, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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]

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

5+ Year Member Top Contributors Of The Month



Works like a charm! Thanks for your time! :)
2:15 pm on Jun 8, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



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.