焦点旁边的输入时如何更改标签的颜色？

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 和后代选择器在 div 中的输入获得焦点时更改标签的颜色。

.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>

焦点旁边的输入时如何更改标签的颜色？

How to change the color of label when input next to it is focused?

html

css

focus