Help - Search - Members - Calendar
Full Version: Change label color on input focus
HTMLHelp Forums > Programming > Client-side Scripting
RainLover
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>


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
Christian J
If the INPUT comes before LABEL:

CODE
<input type="text" id="fname"><label for="fname">First name</label>

you might use this:

CODE
input:focus + label {color: red;}

Otherwise you must use javascript, e.g.:

CODE
<label for="fname">First name</label><input type="text" id="fname"
onfocus="this.previousSibling.className='focus';"
onblur="this.previousSibling.className='';">

Note that there must be no linebreak or other whitespace between the LABEL and INPUT elements (since previousSibling would then apply to that whitespace node instead).

For convencience I also assume that you style the LABEL with a .focus class in a stylesheet.
RainLover
QUOTE(Christian J @ Jun 7 2012, 06:20 PM) *

If the INPUT comes before LABEL:

CODE
<input type="text" id="fname"><label for="fname">First name</label>

you might use this:

CODE
input:focus + label {color: red;}

Otherwise you must use javascript, e.g.:

CODE
<label for="fname">First name</label><input type="text" id="fname"
onfocus="this.previousSibling.className='focus';"
onblur="this.previousSibling.className='';">

Note that there must be no linebreak or other whitespace between the LABEL and INPUT elements (since previousSibling would then apply to that whitespace node instead).

For convencience I also assume that you style the LABEL with a .focus class in a stylesheet.


Very beautiful! Perfect! :)
previousSibling is a clever idea. Is it correct coding to avoid inline java script:

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">
label {color:black;}
.focus {color:red;}
</style>
<script type="text/javascript">
function change(el) {
el.previousSibling.className = 'focus';
}
function back(el) {
el.previousSibling.className = '';
}
</script>
</head>
<body>
<form action="#">
<label for="fname">First name</label><input type="text" id="fname" onfocus="change(this);" onblur="back(this);">
<br>
<label for="lname">Last name</label><input type="text" id="lname" onfocus="change(this);" onblur="back(this);">
</form>
</body>
</html>
Christian J
QUOTE(Christian J @ Jun 8 2012, 01:20 AM) *

If the INPUT comes before LABEL

In addition you might use CSS to make them switch place again:

CODE
form {position: relative;}

label {margin-right: 7em;}

input {
position: absolute;
left: 7em;
}

#fname:focus + label {color: red;}

<input type="text" id="fname">
<label for="fname">First name</label>

though I'm not sure such acrobatics are worth the effort just to avoid a little javascript.
Christian J
QUOTE(RainLover @ Jun 8 2012, 05:44 AM) *

Is it correct coding to avoid inline java script:

That looks correct.

To separate things further you can put the focus and blur events in the script too, but then the script block must either appear after the form elements in the source or you must use an onload event (otherwise the script will not find the form elements).
RainLover
QUOTE(Christian J @ Jun 8 2012, 11:14 AM) *

I'm not sure such acrobatics are worth the effort just to avoid a little javascript.


LOL! Yes, you're right. In addition it doesn't seem to work in some browsers, e.g. IE8.

QUOTE
To separate things further you can put the focus and blur events in the script too


I'd like to, but I have no idea how to do it. Would yo mind helping me with this as well?

Thanks again!
Christian J
Maybe something like this?

CODE
function highlight(elem_id)
{
    var elem=document.getElementById(elem_id);
    elem.onfocus=function()
    {
        this.previousSibling.className='focus';
    }
    elem.onblur=function()
    {
        this.previousSibling.className='';
    }
}
highlight('fname');
highlight('lname');
RainLover
QUOTE(Christian J @ Jun 8 2012, 03:14 PM) *

Maybe something like this?

CODE
function highlight(elem_id)
{
    var elem=document.getElementById(elem_id);
    elem.onfocus=function()
    {
        this.previousSibling.className='focus';
    }
    elem.onblur=function()
    {
        this.previousSibling.className='';
    }
}
highlight('fname');
highlight('lname');



You're so helpful! I really appreciate it! smile.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.