Snippets → jQuery Code Snippets → Highlight Related Label when Input in Focus

Highlight Related Label when Input in Focus

Chris Coyier on 
$("form :input").focus(function() { $("label[for='" + this.id + "']").addClass("labelfocus"); }).blur(function() { $("label").removeClass("labelfocus"); });
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. asheep
    Permalink to comment#

    pleasee give me this example :(

    Reply
  2. jamie paterson
    Permalink to comment#

    This will come in handy, will use a subtle rgba colour background on selection – cheers :-)

    Reply
  3. JohnMotyJr
    Permalink to comment#

    I ran a test case with this because i was doing this the long way. Come to find out, if you happen to already know the labels for="" and input’s id, then a switch case is quicker.

    $('form :input').bind({ focus: function () { var id = $(this).attr('id').toString(); var add = $("label[for='" + this.id + "']").addClass('labelfocus'); switch (id) { case 'title':add;break; case 'description':add;break; case 'resource':add;break; case 'tag':add;break; case 'theme':add;break; case 'language':add;break; } }, blur: function () { $('label').removeClass('labelfocus'); } });

    jsPerf Benchmark Test Case (Slightly modified with triggering events). I do however prefer this method due to the less code and easy to use, especially if you have dynamic forms.

    Reply
  4. David Tintner
    Permalink to comment#

    You can style it with just CSS if you put the label after the input

    <input id="something-cool" type="text" /> <label for="something-cool">Something Cool</label> input:focus + label { position: relative; top: -20px; }
    Reply
  5. Victor Pavlov
    Permalink to comment#

    Here is very good example It realised like small jQuery plugin and can be customized as you wish.

    Reply
  6. Sumit Singh
    Permalink to comment#

    I want same class on label when there is value on input, How to do that

    Reply

Leave a Reply