仅使用css在输入字段上切换标签上的样式(活动/焦点)

Question

想知道是否有一种仅限css的方式来执行切换输入焦点上相应标签上的样式.到目前为止,我有:

    $(document).on('focus active', 'input',function(){
        $('label[for='+$(this).attr('id')+']').addClass('active');
    });
    $(document).on('blur', 'input',function(){
        $('label[for='+$(this).attr('id')+']').removeClass('active');
    });

HTML:

    <div class="row">
     <label for="contact_form_mail">Email</label>
     <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    </div>

和CSS:

.active{ color:red; }

编辑:我肯定知道孩子和兄弟选择器"解决方法",但重新排列干净的标记为纯粹的造型似乎不对,所以如果有另一种纯粹的CSS方式这个答案赢了!

http://jsfiddle.net/fchWj/3/

Answer 1

尝试这种方式: - 输入后放置标签并向左浮动.适用兄弟姐妹.

HTML

<div class="row">
    <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    <label for="contact_form_mail">Email</label>
</div>

CSS

label {
    float:left;
}
input:focus + label {
    color:red;
}

演示

这是一个让相邻兄弟选择器工作的黑客,因为它仅适用于以下元素而不是前一个元素.~将在此元素之后选择所有相邻的兄弟姐妹.因此,如果您.row对每个输入部分有不同,那么请使用+.

Answer 2

如果您愿意切换元素,那么就去

演示

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

label {
    float: left;
    margin-right: 5px;
}

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

说明:我们在+这里使用相邻选择器,因此当文本框被聚焦时,我们选择label标签并应用颜色red

注意:别忘了清除浮子;)

Answer 3

仅使用 CSS 即可，无需切换标签和输入的顺序。您可以:focus-within在父元素上使用CSS 伪类，它适用于具有焦点的子元素的元素。

在您的示例中，您可以使用以下内容：

.row:focus-within label {
    color: red;
}

请注意，这个伪类相对较新，因此只有现代浏览器支持它。