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

当div中的输入聚焦时，您可以利用: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>

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

2 个答案: