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。

看起来您希望边框围绕图标和字段，但目前只围绕字段？我的建议是像这样使用兄弟选择器:(从我下面的例子中我已经在输入后移动了图标）

＆＃13;

* {
    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;
}

＆＃13;

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

＆＃13;

如何在包含的输入具有焦点时约束CSS？

1 个答案: