Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Highlight Related Label when Input in Focus

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

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 ↓

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Go PRO on CodePen

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

Signup for The Lodge

Peruse Jobs!

Always good to keep your eye on the field.

If you're looking to hire, posting your job on the CodePen job board means it will be shown here on CSS-Tricks and on the ShopTalk job board as well.

Post a Job

We can do the real footer now.