CSS，修改与焦点上的输入不相邻的标签

Question

我目前正在尝试修改生成的HTML页面的CSS。我无权访问此页面上的脚本或更改基本HTML。

表单有输入，我正在尝试为它们创建浮动标签，我通常会这样做：

<input id="email">
<label for="email">E-mail</label>

CSS就像这样：

input:focus + label { top: 100%; }

但是，生成的HTML的结构如下所示，输入和错误块之前的标签位于：

之间

<label for="email">Email Address</label>
<div aria-hidden="true" class="error itemLevel">
<p aria-live="polite" role="alert" tabindex="1">Please enter a valid email address.</p>
<input aria-required="true" id="email" title="Email address that can be used to contact you." type="text">

如何使用纯CSS定位标签？

Answer 1

您可以使用属性选择器：

label[for="email"] { ... }