How to change label color on input focus in pure javascript?

Question

I have two input box inside a div of position absolute. And a label on those input boxes. The effect I want is when i focus one input box then the label should be blue color and when blurred should be removed the class (blue color). And simultaneously the other label and input box too.

// Initial color of label
label.labels{
  color: black;
}

input.box{
  border-width: 0 0 2px 0;
  outline: none;
}

<div style = "position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <label class = "labels">First Name:</label>
  <input type = "text" class = "box" /><br />
  <label class = "labels">Last Name:</label>
  <input type = "text" class = "box" />
</div>

When i focus the input.box then label.labels color should be blue. And ya, both the input and both the labels have same classes. How to achieve this effect with Pure Javascript? Or if possible please tell me how can i achieve this with css?

[you might be interested in the `:focus` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) — castis, Oct 13 '17 at 15:42
Your code doesn't use the `label` element properly. It either needs to wrap the element it is a label for, or it needs to have the `for` attribute set to the `id` of the element it is for. `label` is a key element in UI accessibility and should be used properly. — Scott Marcus, Oct 13 '17 at 16:05

score 4 · Answer 1 · answered Oct 13 '17 at 15:50

A solution with css using the :focus-within pseudoelement. Note that this is not supported in IE / Edge.

You will need to wrap each label and input pair for this to work.

// Initial color of label
label.labels {
  color: black;
}

input.box {
  border-width: 0 0 2px 0;
  outline: none;
}

.field:focus-within .labels {
  color: blue;
}

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <div class="field">
    <label class="labels">First Name:</label>
    <input type="text" class="box" /><br />
  </div>
  <div class="field">
    <label class="labels">Last Name:</label>
    <input type="text" class="box" />
  </div>
</div>

This is a great solution. Keep in mind it is not universally supported: http://caniuse.com/#search=focus-within — wlh, Oct 13 '17 at 15:53
Yeah! As it is not supported by all browsers. I am sorry i can't accept this answer. But this is a great solution! — Sanjay, Oct 13 '17 at 16:27

score 4 · Accepted Answer · answered Oct 13 '17 at 16:00

Here is a solution using pure Javascript :

function toggleClass() {
  this.previousElementSibling.classList.toggle('imblue');
}

var inputs = document.getElementsByClassName('box');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];

  input.addEventListener('focus', toggleClass);
  input.addEventListener('blur', toggleClass);
}

label.labels {
  color: black;
}

input.box {
  border-width: 0 0 2px 0;
  outline: none;
}

.imblue {
  color: blue !important;
}

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <label class="labels">First Name:</label>
  <input type="text" class="box" /><br />
  <label class="labels">Last Name:</label>
  <input type="text" class="box" />
</div>

Whoa! Unbelievable! Looks like I need to deep dive in Javascript. — Sanjay, Oct 13 '17 at 16:31

How to change label color on input focus in pure javascript?

2 Answers2