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

Question

我有像<label>name:<input></label>这样的标签和像label:active{/*properties*/}这样的css，我希望在<label>中将属性应用于name，当我单击<input>时，它将被应用，但在我单击它后，它很快就失去了对<input>的关注。

下面是一个示例：http://jsfiddle.net/GuCk4/2/

Answer 1

标签{display:block}标签:活动，标签:悬停，标签:焦点{font-weight:700}

按你想要的方式工作。

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

Answer 2

对于任何使用jQuery 1.7+的人来说，这里有一个更好的jQuery，它可以在包装了class的label上切换“活动”<input type="checkbox">。

$("body").on(
  "click",
  "label input[type=checkbox]",
  function(){
    $(this).parent("label").toggleClass("active");
  }
);

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