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,630 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> |
Lo-Fi Version | Time is now: 28th March 2024 - 03:49 PM |