CODEWITHSUNDEEP
htmlcssinputsass
Mr KnoX
Mr KnoX

Reputation: 11

Change label color when focus within a input

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.

Upvotes: 1

Views: 929

Answers (1)

Paulie_D
Paulie_D

Reputation: 115313

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>

Upvotes: 3

Related Questions