儿童焦点后Css改变父母

Question

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

但这不起作用

Answer 1

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

新的CSS伪类:focus-within可以帮助解决这类问题，并在人们使用Tab键进行导航时提供可访问性，在使用屏幕阅读器时很常见。

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

  

：focus-within伪类匹配自身的元素   匹配：焦点或具有匹配的后代：焦点。

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

Answer 2

我稍微修改了你的例子

Live Demo

<强> 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;
}