css - 当输入字段仅以 css 为焦点时切换标签样式

Question

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

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

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

Answer 1

如果 label，你只能用纯 CSS 做到这一点在 input 之后插入.可以使用 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/