无论如何都要有一个标签响应 :focus CSS

2022-01-25 00:00:00 label focus css

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

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

相关文章