Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Change label color on input focus

    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

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    See if this meets your needs ...
    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">
    
    </style>
    </head>
    <body>
    <form action="#" onsubmit="return false">
    <label for="fname">First name
     <input type="text" id="fname"
     onfocus="this.style.backgroundColor='orange'"
     onblur="this.style.backgroundColor='white'"></label>
    <br>
    <label for="lname">Last name
     <input type="text" id="lname"
     onfocus="this.style.backgroundColor='orange'"
     onblur="this.style.backgroundColor='white'"></label>
    </form>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Here's a quick & dirty method, but it should at least point you in the right direction:

    HTML:
    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>
    <script type="text/javascript" src="label.js"></script>
    
    </head>
    <body>
    <div id="wrapper">
    <form action="#">
    <label for="fname" id="label1" style="color:#000000;">First Name:</label> &nbsp;<input type="text" id="fname" onFocus="changeLabel(1); ">
    <br>
    <label for="lname" id="label2" style="color:#000000;">Last Name:</label> &nbsp;<input type="text" id="lname"  onFocus="changeLabel(2);">
    </form>
    </div>
    </body>
    </html>
    JS (label.js):
    Code:
    function changeLabel(i) {
    
    var newColor = document.getElementById("wrapper");
    if (i == 1) {
     	document.getElementById("label1").style.color = "#C00000";
    }
    else {
    	document.getElementById("label1").style.color = "#000000";
    }
    		
    if (i == 2) {
     	document.getElementById("label2").style.color = "#C00000";
    }
    else {
    	document.getElementById("label2").style.color = "#000000";
    }
    
    
    }
    Obviously you can choose whatever colors you want, and even apply additional styling (bold, etc.) as desired.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Two heads are better than one. IMHO consulting more people is always better than limiting yourself to a group. In addition, sometimes I haven't gotten even a single answer in a forum while there was a hot discussion in another.

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by iBall View Post
    Inline javascript is generally frowned upon nowadays.

    Here is one way without inline scripting.

    Code:
        
       <body>
            <form action="#" id="myForm">
                <label for="fname" id="lblfname">First name</label><input type="text" id="fname"/>
                <br />
                <label for="lname" id="lbllname">Last name</label><input type="text" id="lname"/>
            </form>
    
            <script type="text/javascript">
                var inputsO = document.getElementById('myForm').getElementsByTagName('input');
                
                for(i=0; i<inputsO.length; i++){
                    if(inputsO[i].nodeName.toLowerCase() == 'input' && inputsO[i].type.toLowerCase() == 'text'){
                       inputsO[i].onfocus = function(){setFocusColor(this.id)}
                       inputsO[i].onblur = function(){setBlurColor(this.id)}
                    }
                }
                function setFocusColor(elemID){
                    document.getElementById('lbl'+elemID).style.color = 'red';
                }
                function setBlurColor(elemID){
                    document.getElementById('lbl'+elemID).style.color = 'black';
                }
            </script>
        </body>
    Nice approach! Thank you!

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Arrow

    Quote Originally Posted by iBall View Post
    <offTopic style="clarification">



    I don't see the point of the question. There is nothing wrong with posting on multiple websites. It's not against any rules and I haven't seen a website that prohibits its members from posting elsewhere at teh same time. Even I do it .

    Why on earth would you want to restrict people to posting only on codingforums? People can post where they like.

    Surely you're not assuming that every time you reply to a request for help on codingforums that the op has not posted anywhere else as well, are you?

    I see lots of posts, especially from newbies, requesting the same help on multiple web sites. So why pick on this op? The world does not revolve around a single website .


    </offTopic>

    I don't mind x-posts.
    I would like it better if, once you get an acceptable solution, on any forum, that they be noticed so that others don't waste any more time trying to help you.

    Alternate solutions are great. Even if they come from elsewhere.
    Just give them a chance to be evaluated.


  •  

    LinkBacks (?)

    1. 03-12-2014, 12:52 PM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •