The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
Christian J
post Jun 8 2012, 03:14 PM
Post #2


.
********

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 #3


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

Posts in this topic


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

 



- Lo-Fi Version Time is now: 19th March 2024 - 09:00 AM