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

前端之家收集整理的这篇文章主要介绍了无论如何要有一个标签响应:焦点CSS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法让标签响应焦点.我有一些代码,其中textfield在焦点上有不同的样式.然而,标签也需要略有不同的风格.我尝试了这个,但它没有影响标签.
#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;
}

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

有任何想法吗,

奇妙

解决方法

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

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

#header .search input:focus + label

猜你在找的CSS相关文章