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获得焦点后效果,如下图