点击搜索输入框时如何修改背景透明度并高亮输入框

你原来的写法问题在于给body设置opacity会让整个页面（包括搜索框）都变半透明，子元素的opacity无法独立于父元素生效。下面给你两种可行的实现方案：

方案1：使用遮罩层 #

这种方式最直观，通过一个全屏遮罩覆盖页面，聚焦时显示遮罩，同时让搜索框层级高于遮罩：

<!-- HTML结构 -->
<div class="page-content">
  <!-- 这里放页面其他内容 -->
  <p>页面主体内容...</p>
</div>
<input type="text" class="searchbar1" placeholder="搜索...">
<div class="overlay"></div>

/* CSS样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none; /* 遮罩不干扰点击交互 */
  transition: opacity 0.3s ease;
  z-index: 99;
}

.searchbar1:focus ~ .overlay {
  opacity: 1;
}

.searchbar1 {
  position: relative;
  z-index: 100; /* 确保搜索框在遮罩上方 */
  padding: 8px;
}

方案2：给页面内容容器加透明度/滤镜 #

如果不想额外添加遮罩元素，可以把页面内容放在单独容器里，聚焦时给容器加效果：

<!-- HTML结构 -->
<div class="page-content">
  <!-- 页面其他内容 -->
  <p>页面主体内容...</p>
</div>
<input type="text" class="searchbar1" placeholder="搜索...">

/* CSS样式 */
.page-content {
  transition: opacity 0.3s ease;
}

.searchbar1:focus ~ .page-content {
  opacity: 0.5;
  /* 也可以搭配模糊增强效果：filter: blur(2px); */
}

.searchbar1 {
  padding: 8px;
}

如果搜索框和内容容器不是同级元素，可以用现代浏览器支持的:has()选择器来实现：

body:has(.searchbar1:focus) .page-content {
  opacity: 0.5;
}

以上两种方案都能实现你要的效果：搜索框聚焦时，页面其余部分变灰，搜索框保持正常显示状态。

内容的提问来源于stack exchange，提问作者Manoj Patel