如何在包含的输入具有焦点时限制CSS?
问题描述:
假设我有一个表单输入结构如下:如何在包含的输入具有焦点时限制CSS?
<div class="wrapper">
<span class="icon icon-search"></span>
<input type="text"/>
</div>
是有办法,有CSS3,对焦点状态应用红色边框围绕.wrapper DIV输入元素?
.wrapper input:focus {
border solid thin red;
}
将边界放在输入字段上,但我希望它在包含div上。
答
你正在寻找一个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>