Как изменить цвет метки, когда рядом с ней находится фокус ввода?

Question

У меня есть div с меткой и полем ввода в форме.

Когда поле ввода сфокусировано, я хочу, чтобы граница div изменила цвет (мне удалось это сделать), но я также хочу, чтобы цвет метки изменился.
Поскольку метка не является родительской для ввода, я не уверен, как это сделать.

Вот HTML:

<div class="floating-fake">
  <label class="label-ff col-form-label-sm">Ansprechpartner</label>
  <input type="text" class="input-ff form-control-sm" name="ansprechpartner" value="{{ old('ansprechpartner') }}">
</div>

и вот css:

.input-ff {
   width: 97%;
   margin-left: 3%;
   border: none;
   letter-spacing: 0.5px;
}
.input-ff:focus {
  outline: none;
  border: teal;
  background: #fff;
}
.floating-fake:focus-within {
  border-color: #22c7dd;
}

Метка должна измениться на color: #22c7dd;.
Я искал это, но натолкнулся только на решения javascript (которые я стараюсь избегать) или другие с селектором +, который не поможет мне в этом случае.

Я надеюсь, что кто-то может помочь мне с этим, так как я не очень опытен, когда дело доходит до html / css.

Answer 1

Вы можете использовать :focus-within и селектор-потомок для изменения цвета метки, когда фокус ввода находится в фокусе.

.input-ff {
  width: 97%;
  letter-spacing: 0.5px;
}

.input-ff:focus {
  outline: none;
  border: teal;
  background: #fff;
}

.floating-fake:focus-within {
  border-color: #22c7dd;
}

.floating-fake:focus-within label {
  color: red
}

<div class="floating-fake">

  <label class="label-ff col-form-label-sm">Ansprechpartner</label>

  <input type="text" class="input-ff form-control-sm" name="ansprechpartner" value="red">
</div>

Answer 2

Можете ли вы попробовать это:

<div class="floating-fake">
  <label class="label-ff col-form-label-sm">Ansprechpartner</label>
  <input type="text" class="input-ff form-control-sm" name="ansprechpartner" value="{{ old('ansprechpartner') }}" onfocus="this.style.border-color='#22c7dd';">
</div>