Change label color on input focus |
Change label color on input focus |
RainLover |
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 |
Christian J |
Jun 7 2012, 06:20 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,644 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. |
RainLover |
Jun 7 2012, 10:44 PM
Post
#3
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
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> |
Christian J |
Jun 8 2012, 11:06 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,644 Joined: 10-August 06 Member No.: 7 |
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. |
Christian J |
Jun 8 2012, 11:14 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,644 Joined: 10-August 06 Member No.: 7 |
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). |
RainLover |
Jun 8 2012, 12:17 PM
Post
#6
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
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! |
Christian J |
Jun 8 2012, 03:14 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,644 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'); |
RainLover |
Jun 8 2012, 08:31 PM
Post
#8
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
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! |
Lo-Fi Version | Time is now: 10th April 2024 - 01:26 AM |