如何在标签内的输入字段处于活动状态时保持标签处于活动状态

Question

我有像<label>name:<input></label>这样的标签 和CSS一样 label:active{/*properties*/} 我希望当我点击name <label>时，<input>应用的属性会被应用，但在我点击它之后很快就会将注意力集中到<input>。

这是一个例子：http://jsfiddle.net/GuCk4/2/

Answer 1

如果我理解你的问题，你可以这样做......不改变任何HTML。

label, input, input:focus{
    font-weight: bold;
}

示例：http://jsfiddle.net/jasongennaro/GuCk4/4/

BTW：你真的不需要input:focus这里......至少在我的Chrome测试中是这样。您可能需要其他浏览器。

修改

好的，在@Mohsen的评论之后，我重读了这个问题。

你想要的是css中的父选择器。这不存在。由于css依赖于级联，它将样式应用于DOM而不是它。

所以，根据@ Mohsen的回答，做你想要的唯一方法是重写你的HTML，或者使用一些jQuery，就像这样

$('input').focus(function(){
    $(this).parent().css('font-weight','bold');
});

$('input').blur(function(){
    $(this).parent().css('font-weight','normal');
});

示例2： http://jsfiddle.net/jasongennaro/GuCk4/5/

Answer 2

标签{显示：块} 标签：激活，标签：悬停，标签：焦点{字体重量：700}

按照你想要的方式工作。

@steveax是正确的，不要在输入后放置标签，除非它是一个复选框

Answer 3

对于使用jQuery 1.7+的人来说，这里有一个更好的jQuery来切换class label上的“{1}}”。

<input type="checkbox">

演示： http://jsbin.com/iHaJeCe/3