如何在包含的输入具有焦点时限制CSS？

Question

假设我有一个表单输入结构如下：

<div class="wrapper"> 
    <span class="icon icon-search"></span> 
    <input type="text"/> 
</div> 

是有办法，有CSS3，对焦点状态应用红色边框围绕.wrapper DIV输入元素？

.wrapper input:focus { 
    border solid thin red; 
} 

将边界放在输入字段上，但我希望它在包含div上。

Answer 1

你正在寻找一个CSS父母选择器。不幸的是，目前尚不可用。您正在寻找的确切功能需要JavaScript或其他HTML。

它看起来像你想要边框围绕图标和领域，但目前它只是围绕领域？我的建议是使用兄弟选择像这样：（从我的例子在下面，我输入后移动的图标）

* { 
 
    box-sizing: border-box; /* Helps with sizing calculations */ 
 
} 
 
.wrapper { 
 
    position: relative; 
 
} 
 
.icon { 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    background-color: blue; 
 
    left: 200px; 
 
    top: 0; 
 
    border: solid 1px transparent; 
 
    border-left: none; 
 
} 
 
input { 
 
    width: 200px; 
 
    height: 20px; 
 
    border: solid 1px blue; 
 
    border-right: none; 
 
} 
 
input:focus { 
 
    border-color: red; 
 
    outline: 0; 
 
} 
 
input:focus + .icon { 
 
    border-color: red; 
 
}

<div class="wrapper"> 
 
    <input type="text"/> 
 
    <span class="icon icon-search"></span> 
 
</div>