无论如何要有标签响应:焦点CSS

Question

有没有办法让标签响应焦点.我有一些代码,其中文本字段在焦点上具有不同的样式.然而,标签也需要略有不同的风格.我尝试了这个,但它没有影响标签.

#header .search label {
    background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
    padding-left:20px;
    height:20px;
    float:right;
}
#header .search label:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
    padding-left:20px;
    height:20px;
    float:right;
}
#header .search input {
    padding:0px;
    border:0px;
    width:140px;
    height:20px;
    float:left;
    padding-right:10px;
    background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
    padding:0px;
    width:190px;
    height:20px;
    float:left;
    padding-right:10px;
    background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}

标签包含图像和圆角的另一部分,它也必须改变颜色才能使字段看起来正确.

有任何想法吗,

奇妙

Answer 1

实际上,您无法将焦点放在标签上.它不是一个可聚焦的形式元素.此外,即使你能做到这一点,那么无论以前有什么焦点(这意味着你的输入)都会失去它的标签.

您可能需要重新构建HTML(并相应地修改CSS),以便您可以选择input:focus,然后选择该输入的相应标签.例如,如果您在输入后移动了标签并使用以下CSS选择器作为标签,那么您应该能够完成您想要的任务.

#header .search input:focus + label

Answer 2

BoltClock的答案是实现此功能的更加语义,轻量级的方式.但是,并不总是可以使用特定的HTML结构(特别是为了方便这样的次要功能),而CSS缺乏遍历HTML层次结构的能力.为了解决这个问题,这里有两个选择.第一个是即将推出(CSS规范4),第二个是我们的老伙伴Javascript.

首先,CSS4的:focus-within伪选择器.这完全符合它在锡上所说的内容(基于任何子元素的活动焦点状态的范围).了解更多关于该规范在这里.假设你有一个HTML结构:

<div class="input-wrapper">
    <label for="elem">Label Text
      <input name="elem" id="elem" type="text" />
    </label>
</div>

您可以通过以下方式确定"焦点"标签的范围:

label:focus-within{}

出于同样的原因,您还可以使用以下内容对父div进行范围调整:

div.input-wrapper:focus-within{}

神奇.但今天不能使用:(

第二,如果您已经使用了JS选择器引擎(即jQuery,Sizzle等),您还可以执行以下操作:

$('input').on("focus", function(){
  var input = $(this);
  // assuming label is the parent, i.e. <label><input /></label>
  var label = $(this).parent();
  label.addClass('focussed');
  input.on("blur", function(){
    label.removeClass('focussed');
    input.off("blur");
  });
});

这是未经测试的,但实现的本质是使用类而不是:focus伪选择器.所以你可以添加你的焦点风格label.focussed{}.我添加了(并自行删除)模糊处理程序以便于删除类.