Change label color when focus within a input

Question

input {
  background: transparent;
  position: relative;
}

label {
  color: black;
}

input:focus + label {
  color: red !important;
  border: 1px solid white;
}

<div class="input-box d-flex flex-column">
  <label for="name" class="py-2">Your Name</label>
  <input class="py-2 border-0 text-white" id="name" type="text" />
</div>

I want to change the label text color, when i focus in a input of a form.

Answer 1

You can't select UP the DOM.

What you can use is :focus-within on the wrapping div and then select downwards to the label..

input {
  background: transparent;
}

label {
  color: black;
}

.input-box:focus-within label {
  color: red !important;
  border: 1px solid white;
}

<div class="input-box d-flex flex-column">
  <label for="name" class="py-2">Your Name</label>
  <input class="py-2 border-0 text-white" id="name" type="text" />
</div>