How to Change Label color on input focus in HTML

17 Mar

In this post we will learn How to Change Label color on input focus in HTML.

How to Change Label color on input focus in HTML

How to Change Label color on input focus in HTML

Implementation

Create a form

<form>
<label for=”inputelement”>label</label>
<input type=”text” id=”inputelement” name=”inputelement” />

<label for=”inputelement1″>label</label>
<input type=”text” id=”inputelement1″ name=”inputelement” />
</form>

Add this css

.labelfocus { background: green; }

Add the following script code in your head tag

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

You can check the example in the JSFiddle 

Leave a Reply

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