在输入中聚焦时更改标签颜色答案

【问题标题】：Change label color when focus within a input在输入中聚焦时更改标签颜色
【发布时间】：2021-11-01 16:20:03
【问题描述】：

input {
  background: transparent;
  position: relative;
}

label {
  color: black;
}

input:focus + label {
  color: red !important;
  border: 1px solid white;
}

<div class="input-box d-flex flex-column">
  <label for="name" class="py-2">Your Name</label>
  <input class="py-2 border-0 text-white" id="name" type="text" />
</div>

当我关注表单的输入时，我想更改标签文本颜色。

【问题讨论】：

只需将标签放在输入下方。你很高兴
将输入包装在标签内并使用label:focus-within input

标签： html css input sass

【解决方案1】：

You can't select UP the DOM.

你可以在包装div上使用:focus-within，然后向下选择标签..

input {
  background: transparent;
}

label {
  color: black;
}

.input-box:focus-within label {
  color: red !important;
  border: 1px solid white;
}

<div class="input-box d-flex flex-column">
  <label for="name" class="py-2">Your Name</label>
  <input class="py-2 border-0 text-white" id="name" type="text" />
</div>

【讨论】：