CSS伪类实现input聚焦时，上层div样式改变

news2025/3/18 1:39:42

CSS伪类实现input聚焦时，上层div样式改变

可以使用:focus-within伪类选择器，它会在div内的任何元素获得焦点时选择该div，明确的是，获得焦点和被点击是不相等的，div能被点击，但是不能获得焦点，也就是没有focus属性。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Focus Within Example</title>  
<style>  
  .input-wrapper {  
    border: 1px solid #ccc;  
    padding: 10px;  
    transition: border-color 0.3s ease;  
  }  
  
  .input-wrapper:focus-within {  
    border-color: #007BFF;  
  }  
  
  .input-wrapper input {  
    /* 确保input的outline不会与wrapper的边框重叠 */  
    border: none;  
    outline: none;  
  }  
</style>  
</head>  
<body>  
  
<div class="input-wrapper">  
  <input type="text" placeholder="Click or tab to me!">  
</div>  
  
</body>  
</html>

在这个示例中，.input-wrapper是一个包含input元素的div。当input元素获得焦点时（无论是通过点击还是通过Tab键），.input-wrapper的边框颜色就会改变。这是通过:focus-within伪类选择器实现的，它会在div内部的任何元素（在这个例子中是input）获得焦点时选择div。

请注意，这种方法仍然依赖于input元素获得焦点，而不是直接点击div。如果你需要直接点击div（而不是其内部的input元素）来改变样式，那么你将需要使用JavaScript或其他脚本语言来处理这个点击事件。

input未获得焦点前效果，如下图

在这里插入图片描述