无论如何有一个标签回应：focus CSS [英] Anyway to have a label respond to :focus CSS

问题描述

有什么办法让标签回应焦点。我有一些代码，其中textfield有一个不同的风格对焦。标签也需要一个稍微不同的样式。

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.

任何想法，

奇妙

推荐答案

你实际上不能把焦点放在一个标签上。它不是一个可聚焦的表单元素。此外，即使您可以这样做，那么以前的焦点（意味着您的输入）将失去它的标签。

You can't actually give focus to a label. It's not a focusable form element. Besides, even if you could do that, then whatever previously had focus (that means your input) would lose it to the label anyway.

您可能需要重新构建HTML（并相应地修改CSS），以便您可以选择 input：focus ，然后该输入的对应标签。例如，如果您在输入后移动了标签，并为标签使用了以下CSS选择器，那么您应该能够完成所需的操作。

You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focus and then that input's corresponding 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.

#header .search input:focus + label

这篇关于无论如何有一个标签回应：focus CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！