如何在文本框选中时修改Div的CSS属性及PHP登录面板透明度调整

嘿，我来帮你搞定这两个困扰你的技术问题！

CSS本身没有原生的“父选择器”，但我们有两个可靠的方案来实现这个需求：

方案1：使用CSS :focus-within 伪类（推荐） #

这个伪类会在容器内的任何元素获得焦点时触发样式，完美匹配你的场景。直接在现有CSS里添加：

.container:focus-within {
  opacity: 1; /* 或者你想要的其他属性，比如修改背景色 */
  background: #FFF; /* 比如把背景改成完全不透明的白色 */
  transition: 0.3s;
}

这样当容器内的文本框（或任何表单元素）被选中时，.container的样式就会更新，和hover效果的逻辑一致。

方案2：JavaScript 监听焦点事件（兼容旧浏览器） #

如果需要兼容不支持:focus-within的旧浏览器（比如IE），可以用JS来实现：

// 获取容器和所有输入框
const container = document.querySelector('.container');
const inputFields = container.querySelectorAll('input[type="text"], input[type="password"]');

// 给每个输入框绑定焦点事件
inputFields.forEach(field => {
  field.addEventListener('focus', () => {
    container.classList.add('input-focused');
  });
  
  field.addEventListener('blur', () => {
    // 检查是否还有其他输入框处于聚焦状态
    const isAnyFieldFocused = Array.from(inputFields).some(f => f === document.activeElement);
    if (!isAnyFieldFocused) {
      container.classList.remove('input-focused');
    }
  });
});

然后在CSS里添加对应的类样式：

.container.input-focused {
  opacity: 1;
  background: #FFF;
  transition: 0.3s;
}

首先要注意一个细节：你原来用的opacity: 0.6会让整个容器包括里面的文本、按钮等所有子元素都变透明，这可能不是你想要的效果。更合理的做法是用background的rgba值来单独让背景透明，内容保持正常：

.container {
  /* 替换原来的 background 和 opacity */
  background: rgba(255, 255, 255, 0.6); /* 最后一个值是透明度，0-1之间 */
  /* opacity: 0.6; 移除这行 */
  /* 其他原有样式保留 */
  width: 320px;
  height: 500px;
  align-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 30px 30px;
  transition: 0.3s;
}

/* hover时把背景改成完全不透明 */
.container:hover,
.container:focus-within {
  background: rgba(255, 255, 255, 1);
  transition: 0.3s;
}

如果PHP生成的登录面板没有使用.container类，你需要先找到它实际的类名或ID（比如通过浏览器开发者工具查看元素），然后把CSS选择器改成对应的名称即可。比如如果PHP输出的是<div class="login-panel">，就把.container替换成.login-panel。

另外，如果PHP输出的元素带有内联样式（比如style="opacity: 0.8;"），会覆盖你的外部CSS，这时候最好修改PHP代码移除内联样式；如果暂时改不了，可以用!important来强制覆盖（不推荐，但应急可用）：

.container {
  background: rgba(255, 255, 255, 0.6) !important;
}

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