Html Css在子焦点之后更改父焦点

我需要在关注子元素后向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;
}

.header\u搜索{
边界：0px；
}
.header_搜索输入：焦点

---

但这不起作用

我稍微改变了你的例子

HTML

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

---

您现在可以在纯CSS中执行此操作，因此不需要JavaScript

新的CSS伪类

：focus in

将有助于此类情况，并将有助于人们使用选项卡导航时的可访问性，这在使用屏幕阅读器时很常见

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

---

pseudo类中的：focus与元素本身匹配 匹配：焦点或具有匹配：焦点的子体的

---

您可以检查哪些浏览器支持此

，不幸的是，OP想要设置父div的边框样式，而不是输入的边框样式。这仍然只是更改子对象的属性，而不是父对象的属性。
.header_search:focus-within {
    border: 1px solid white;
}