当输入字段仅聚焦 css 时切换标签样式

Question

我需要在输入焦点时切换相应标签上的样式。 HTML+CSS:

<div>
<label for="e_mail">E-Mail</label>
<input type="text" />
</div>
input[type=text]:focus + label {
color: red;
}

P.S。如何在不更改 HTML 中的标签 "label" 和 "input" 的情况下执行此操作？

Answer 1

如果在 input 之后插入 label，则只能使用纯 CSS 来做到这一点。解决方法是在标签上使用 float: left; 将其放在左侧。

此外，<label for=""></label> 要求输入具有 id 才能正常工作。

<div>
  <input type="text" id="e_mail" />
  <label for="e_mail">E-Mail</label>
</div>

-

input[type="text"]:focus + label {
  color: red;
}
label {
  float: left;
}

toggling styles on label when input field is focus with css only