无论如何要有一个标签响应 :focus CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5978239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anyway to have a label respond to :focus CSS
提问by RIK
Is there any way to have a label respond to focus. I have some code where the textfield has a different style on focus. The label also however needs a slightly different style. I tried this but it did not effect the label.
有没有办法让标签响应焦点。我有一些代码，其中文本字段的焦点样式不同。然而，标签也需要稍微不同的风格。我试过这个，但它没有影响标签。
#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;
}
The label contains an image and the other part of a round corner and it too must change colour in order for the field to look correct.
标签包含一个图像和圆角的另一部分，它也必须改变颜色以使该字段看起来正确。
Any ideas,
有任何想法吗，
Marvellous
奇妙
回答by BoltClock
You can't actually give focus to a label. It's not a focusable form element. Besides, even if you coulddo that, then whatever previously had focus (that means your input) would lose it to the label anyway.
您实际上无法将焦点放在标签上。它不是一个可聚焦的表单元素。此外，即使你能做到这一点，那么任何以前有焦点的东西（这意味着你的输入）无论如何都会失去它的标签。
You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focusand then that input'scorresponding label. For instance, if you moved your label after your input and used the following CSS selector for your label, you should be able to accomplish what you want.
您可能需要调整你的HTML（以及相应地修改CSS），让您可以选择input:focus，然后是输入的相应的标签。例如，如果您在输入后移动标签并为标签使用以下 CSS 选择器，您应该能够完成您想要的操作。
#header .search input:focus + label
回答by milehighsi
BoltClock's answer is the more semantic, lightweight way of achieving this functionality. However it's not always possible to have a specific HTML structure (especially to facilitate a minor feature like this) and CSS lacks the ability to traverse up the HTML hierarchy. To get around that, here are two alternatives. The first is coming soon (CSS spec 4) and the second is our old mate Javascript.
BoltClock 的答案是实现此功能的更语义化、轻量级的方式。然而，并不总是可以拥有特定的 HTML 结构（尤其是为了促进像这样的次要功能）并且 CSS 缺乏向上遍历 HTML 层次结构的能力。为了解决这个问题，这里有两种选择。第一个即将推出（CSS 规范 4），第二个是我们的老伙伴 Javascript。
First up, CSS4's :focus-withinpseudo selector. This does exactly what it says on the tin (scopes based on any child element's active focus state). Read more about the spec here. So assuming you have a HTML structure of:
首先，CSS4 的:focus-within伪选择器。这正是它在锡上所说的（范围基于任何子元素的活动焦点状态）。在此处阅读有关规范的更多信息。所以假设你有一个 HTML 结构：
<div class="input-wrapper">
<label for="elem">Label Text
<input name="elem" id="elem" type="text" />
</label>
</div>
you could scope the 'focussed' label by simply:
您可以简单地通过以下方式确定“重点”标签的范围：
label:focus-within{}
by the same token, you could also scope the parent div with:
出于同样的原因，您还可以使用以下内容来限定父 div：
div.input-wrapper:focus-within{}
Magical. But not for use today :(
神奇。但今天不使用:(
Second up, if you're already using a JS selector engine (i.e. jQuery, Sizzle, etc.), you could also do something along the lines of:
其次，如果您已经在使用 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");
});
});
This is untestedbut the essence of what this achieves is using a class rather than the :focuspseudo selector. So you can add your focussed styles to label.focussed{}. I've added (and self-removed) the blur handler to facilitate removing the class.
这是未经测试的，但其实现的本质是使用类而不是:focus伪选择器。因此，您可以将重点样式添加到label.focussed{}. 我已添加（并自行删除）模糊处理程序以方便删除类。
