Skip to main content
Home / Code Snippets / jQuery Code Snippets / Highlight Related Label when Input in Focus

Highlight Related Label when Input in Focus

Avatar of Chris Coyier
Author
Chris Coyier
6 Comments
Join Conversation
Published

Learn Development at Frontend Masters 

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});
Frontend Masters logo

Need some front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Comments

  1. User Avatar
    asheep
    Permalink to comment#

    pleasee give me this example :(

    Reply
  2. User Avatar
    jamie paterson
    Permalink to comment#

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

    Reply
  3. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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

Your email address will not be published. Required fields are marked *

You may write comments in Markdown thanks to Jetpack Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after. All comments are held for moderation. Be helpful and kind and yours will be published no problem.

We have a
Code of Conduct. Be cool. Be helpful. The web is a big place. Have fun. High five.