Css 当父元素处于子元素 input 的焦点状态时更改父元素的样式

发布于12月29日

我希望当子元素输入中有焦点时更改父元素的样式.

我知道最初的css不起作用.我可以使用状态，因为它是react ，但我想知道是否有更简单的方法.

<div className="container">
  <div className="input__container">
    <input type="text">
    </input>
  </div>
</div>

input:focus .container {
  border: 1px solid blue;
}

推荐答案

使用:focus-within伪类(:has伪类-这里不需要更少的浏览器支持)

从MDN人起:

:Focus-Inside css伪类匹配元素，如果元素或者它的任何后代都专注于.

还有，browser support元已经很不错了

.container {
  border: 5px solid gold;
  display: inline-block;
}

.container:focus-within {
  border: 5px solid green;
}

<div class="container">
  <div class="input__container">
    <input type="text">
    </input>
  </div>
</div>

实用课程推荐