当输入字段仅使用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。如何在不更改标签的情况下执行此操作＆＃34;标签＆＃34;和＆＃34;输入＆＃34;在HTML？

Answer 1

如果在label之后插入input，则只能使用纯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;
}

https://jsfiddle.net/vcw880fr/1/