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,661 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. |
Christian J |
Jun 8 2012, 11:06 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,661 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. |
Lo-Fi Version | Time is now: 27th April 2024 - 09:53 PM |