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: 202
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: 8,074
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: 202
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:14 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,074
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

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: 24th March 2019 - 09:01 PM