CSS实现父元素随子元素获焦样式变化：focus-within失效替代方案

你遇到的问题不是focus-within只对文本输入类元素生效，而是非交互元素（比如div）默认不具备可聚焦性，所以点击它们时不会触发父元素的focus-within状态。

要实现任意子元素触发父元素样式变化的纯CSS方案，只需要给那些非交互子元素添加tabindex属性，让它们能够获得焦点即可：

修改后的代码示例 #

CSS

form { border: 1px solid black; }
form:focus-within { background-color: red; }
div { background-color: yellow; }
/* 可选：给聚焦的div添加样式，区分聚焦状态 */
div:focus { outline: 2px solid blue; }

HTML

<form>
  <input type="text">
  <!-- 添加tabindex让div可聚焦 -->
  <div tabindex="0">click here</div>
</form>

关于tabindex的说明 #

• tabindex="0"：元素会被纳入键盘tab键的遍历顺序中，和默认交互元素（如输入框）的优先级一致。
• tabindex="-1"：元素可以通过鼠标点击获得焦点，但不会被tab键遍历到，适合不需要键盘导航的场景。

这样修改后，不管是点击输入框还是div，form元素的focus-within状态都会被触发，背景色变为红色。

内容的提问来源于stack exchange，提问作者Cain Nuke