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

【问题标题】：How to change the color of label when input next to it is focused?焦点旁边的输入时如何更改标签的颜色？
【发布时间】：2019-04-03 14:25:41
【问题描述】：

我在表单中有一个带有标签和输入字段的 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 方面没有太多经验。

【问题讨论】：

标签： html css focus

【解决方案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>

【讨论】：

谢谢，不知道为什么我没有想到这个，太简单了:D

【解决方案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>

【讨论】：

我已经修复了这篇文章的格式。代码现在可见。