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

Question

我有类似 name: 的标签 和CSS一样 标签：活动{/*属性*/} 我希望将属性应用于 内的 name，当我单击 时，它会被应用，但它单击后不久， 就失去了焦点。

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

Answer 1

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

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

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

顺便说一句：你真的不需要 input:focus 这里......至少在我在 Chrome 上的测试。其他浏览器可能需要它。

编辑

好吧，在@Mohsen 发表评论后，我重新阅读了这个问题。

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

因此，做你想做的事情的唯一方法是重写你的 HTML，按照 @Mohsen 的答案，或者使用一些 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

标签{显示：块}
label:active,label:hover,label:focus{font-weight:700}

按照您想要的方式工作。

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

Answer 3

对于任何使用 jQuery 1.7+ 的人来说，这里有一个更好的 jQuery 功能，可以在包裹在 label 上切换“活动”class “>。

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

演示： http://jsbin.com/iHaJeCe/3< /a>