title: Animating the labels on input focus with CSS and JavaScript
body: <p>I have a few input fields and I want their labels to scale down and slide at the top on focus. I have managed to achieve this with CSS and JavaScript but it only animates the first label on the page.</p>
  <p>The code JS below uses &quot;querySelector&quot; to target the labels. I've also tried using &quot;getElementsByClassName&quot; and &quot;querySelectorAll&quot;. What that does is animate all the labels on the page when I focus on just one input field.</p>
  <p>I'd like to only animate the label attached to input. Any help with this would be greatly appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("change", function(event) {
  
    if (event.target &amp;&amp; event.target.matches(".js_form-input")) {
  
      event.preventDefault();
  
      var inputField = event.target;
      var inputLabels = document.querySelector(".label-span");
  
      if (inputField.value) {
        inputLabels.style.top = "-1.5rem";
      } else {
        inputLabels.style.top = "0rem";
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.input {
    width: 100%;
    border: 0;
    border-bottom: solid 1px grey;
    padding-left: 1rem;
    margin-bottom: 2rem;
    color: $c_pop;
    padding-bottom: 0.7rem;
  }
  
  .input-label {
    position: relative;
  }
  
  .label-span {
    position: absolute;
    top: 0;
    left: 1rem;
    transition: all 0.2s;
  }
  
  .input-label {
    font-size: 0.9rem;
  }
  
  .input:focus+.label-span {
    top: -1.5rem;
    left: 0.5rem;
    font-size: 0.7rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="input-container"&gt;
    &lt;label class="input-label" for="#"&gt;
      &lt;input class="input js_form-input" type="text"&gt;
      &lt;span class="label-span"&gt;First Name&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="input-container"&gt;
    &lt;label class="input-label" for="#"&gt;
      &lt;input class="input js_form-input" type="text"&gt;
      &lt;span class="label-span"&gt;Surname&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="input-container"&gt;
    &lt;label class="input-label" for="#"&gt;
      &lt;input class="input js_form-input" type="text"&gt;
      &lt;span class="label-span"&gt;Email&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've also tried this JS method:</p>
  <pre><code>var inputField = event.target;
          var inputLabels = document.querySelectorAll(&quot;.label-span&quot;);
      
           [].slice.call(inputLabels).forEach(function(label){
            if (inputField.value) {
              label.style.top = &quot;-1.5rem&quot;;
             } else {
              label.style.top = &quot;0rem&quot;;
             }
         });
  </code></pre>