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

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 - 02:47 AM