The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Change label color on input focus
RainLover
post Jun 7 2012, 01:18 PM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 7 2012, 06:20 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jun 7 2012, 10:44 PM
Post #3


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 8 2012, 11:06 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 8 2012, 11:14 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jun 8 2012, 12:17 PM
Post #6


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 8 2012, 03:14 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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');
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jun 8 2012, 08:31 PM
Post #8


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:11 AM