<section id="using-adjacency-selector">
  <h2>Using Adjacency Selector</h2>
  <div class="input-set">
    <input id="favorite-food" />
    <label for="favorite-food">Favorite Food</label>
  </div>
</section>

<section id="using-javascript">
  <h2>Using Javascript</h2>
  <div class="input-set">
    <label for="favorite-song">Favorite Song</label>
    <input id="favorite-song" />
  </div>
</section>

<section id="using-focus-within-explicit">
  <h2>Using :focus-within (Explicit)</h2>
  <div class="input-set">
    <label for="favorite-color">Favorite Color</label>
    <input id="favorite-color" />
  </div>
</section>

<section id="using-focus-within-implicit">
  <h2>Using :focus-within (Implicit)</h2>
    <label>Favorite Flower
      <input id="favorite-flower" />
    </label>
</section>

<section id="using-has">
  <h2>Using :has</h2>
  <label for="favorite-movie">Favorite Movie</label>
  <input id="favorite-movie" />
</section>
#using-javascript {
  label.focused {
    color: red;
  }
}

#using-adjacency-selector {
  .input-set {
    display: flex;
  }
  
  input { order: 2; }
  label { order: 1; }
  
  input:focus + label {
    color: red;
  }
}

#using-focus-within-explicit {
  .input-set:focus-within label {
    color: red;
  }
}

#using-focus-within-implicit {
  label:focus-within {
    color: red;
  }
}

#using-has {
  label:has(+ input:focus) {
    color: red;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

section {
  margin-bottom: 2em;
}

h2 {
  font-size: 1em;
  font-weight: bold;
}

input {
  margin: 0 0.5em;
  border: 0.125em solid #777;
  background: #eee;
}

input:focus {
  border-color: #f00;
  background: #fff;
}
View Compiled
document.querySelectorAll('#using-javascript input').forEach(input => {
  input.addEventListener('focus', () => {
    input.labels.forEach(label => {
      label.classList.add('focused')
    })
  })

  input.addEventListener('blur', () => {
    input.labels.forEach(label => {
      label.classList.remove('focused')
    })
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.