CSS在子元素聚焦后更改父元素

Question

我需要在聚焦在子元素上后，向div添加边框：

html

<div class="header_search col-lg-5">
   <form role="form" action="hledat.php" method="get">
      <input type="text">
   </form>
</div>

css

 .header_search {
        border: 0px;
    }

.header_search input:focus < div {
    border: 1px solid white;
}

但是那并没有起作用。

- user3671862

---

< 是无效的，看起来你遇到了一个被问了成千上万次的问题，叫做CSS3中是否有父选择器？。 - King King

http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex - Ali Gajani

Answer 1

现在你可以通过纯CSS实现这个功能，无需使用JavaScript。

新的CSS伪类:focus-within可用于此类情况，并且可以帮助提高可访问性，当人们使用Tab键进行导航时，屏幕阅读器常用此工具。

.header_search:focus-within {
    border: 1px solid white;
}

---

:focus-within伪类匹配自身具有:focus属性或子元素具有:focus属性的元素。

您可以查看哪些浏览器支持此属性：http://caniuse.com/#search=focus-within

- J J B

Answer 2

我稍微修改了你的例子

演示

HTML

<div class="header_search col-lg-5">
   <form role="form" action="hledat.php" method="get">
      <input type="text">
   </form>
</div>

CSS

.header_search {
        border: 0px;
    }

.header_search input:focus {
    border: 1px solid white;
}

- AndrewWhite

---

不幸的是，OP想要为父级div设置边框样式，而不是输入框。 - King King

这仅仅改变了子元素的属性，而不是父元素。 - Michael