input获取焦点，改变父元素

2024年3月11日 124次阅读 来源: 满天星716

很的一个问题只能使用css实现，input获取焦点，改变父元素的颜色；

试了很久都是只能改变input的背景颜色，百度调研了很久，都是说纯CSS实现不了，找到一篇长篇大论的文章，在我以为我快要接近答案的时候，末尾来了一句纯CSS实现不了，用JS实现去了。

心态炸了！！！能用JS，鬼用css啊。

 最后还是在MDN找见了解决方法，吹一波，。发泄完了，进入正题：

:focus-within

:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树 (en-US)中的后代也包括在内）

/* 当 <div> 的某个后代获得焦点时，匹配 <div> */
div:focus-within {
  background: cyan;
}

Copy to Clipboard

该选择器非常实用。举个通俗的例子：表单中的某个 <input> 字段获得焦点时，整个表单的 <form> 元素都可被高亮。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #a{
      width: 200px;
      height: 200px;
      background-color: black;
    }
    #a:focus-within{
      background-color: antiquewhite;
    }
  </style>
</head>
<body>
  <div id="a">
    <input type="text">
  </div>
</body>
</html>

不得不说，从编程来说，思维确实是重要的，子元素获取焦点，改变不了父元素；那我用父元素监控子元素没毛病。

    原文作者：满天星716
    原文地址: https://blog.csdn.net/weixin_60684791/article/details/122116652
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞