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

最新推荐文章于 2024-06-16 22:13:37 发布

曾大浩

最新推荐文章于 2024-06-16 22:13:37 发布

阅读量470

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_42510217/article/details/139203216

版权

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未获得焦点前效果，如下图

在这里插入图片描述

input获得焦点后效果，如下图

在这里插入图片描述

曾大浩

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS伪类实现input聚焦时，上层div样式改变

元素）来改变样式，那么你将需要使用JavaScript或其他脚本语言来处理这个点击事件。/* 确保input的outline不会与wrapper的边框重叠 */元素获得焦点时（无论是通过点击还是通过Tab键），input未获得焦点前效果，如下图。input获得焦点后效果，如下图。内部的任何元素（在这个例子中是。内的任何元素获得焦点时选择该。的边框颜色就会改变。元素获得焦点，而不是直接点击。请注意，这种方法仍然依赖于。伪类选择器实现的，它会在。
复制链接

扫一扫