css - 无论如何让标签响应 :focus 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;
}

标签包含一个图像和圆 Angular 的另一部分，它也必须改变颜色以使字段看起来正确。

任何想法，

很棒

Answer 1

您实际上无法将焦点放在标签上。它不是可聚焦的表单元素。此外，即使您可以做到这一点，那么之前获得焦点的任何内容(这意味着您的输入)无论如何都会将其丢失到标签中。

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

#header .search input:focus + label