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 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
Christian J
post Jun 8 2012, 11:06 AM
Post #3


.
********

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

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 - 12:09 AM