Нужно изменить цвет текста label в тот момент когда input в фокусе

Question

У меня есть код

<form class="contact__form">
     <label for="name" class="contact__label">Your name</label>
     <input  class="contact__input" type="text" id="name">
     <label for="email" class="contact__label">Your Email</label>
     <input  class="contact__input" type="email" id="email">
     </form>

Изначально Your Name и Your Email серого цвета Когда я нажмаю на input чтобы ввести свое имя Your Name должно поменять цвет на черный и должно быть черным пока я ввожу текст

В ответе использовать можно использовать scss

Answer 1

.flex {
  display: flex;
  gap: 1rem;
}

.flex input {
  order: 2;
}

.flex input:focus+label {
  color: red;
}

<form class="contact__form">
  <div class="flex">
    <input class="contact__input" type="text" id="name">
    <label for="name" class="contact__label">Your name</label>
  </div>
  <div class="flex">
    <input class="contact__input" type="email" id="email">
    <label for="email" class="contact__label">Your Email</label>
  </div>
</form>

БЛОГ НА HUSL

Нужно изменить цвет текста label в тот момент когда input в фокусе

Ответы (1 шт):