当输入字段仅以 CSS 为焦点时切换标签上的样式

【问题标题】：toggling styles on label when input field is focus with css only当输入字段仅以 CSS 为焦点时切换标签上的样式
【发布时间】：2016-02-18 14:03:03
【问题描述】：

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

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

附：如何在不更改 HTML 中的标签“标签”和“输入”的情况下做到这一点？

【问题讨论】：

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

【讨论】：