如何仅用CSS实现点击div内input后改变div颜色？

完全可以用纯CSS实现这个需求，核心是借助CSS的:focus-within伪类——当容器内部的任意子元素获得焦点时，容器本身会匹配这个伪类，从而触发样式变化。

实现代码示例 #

HTML结构

<div class="email-wrap">
  <input type="email" placeholder="请输入邮箱地址">
</div>

CSS样式

/* 容器默认样式 */
.email-wrap {
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #fff;
  transition: background-color 0.3s; /* 添加过渡效果让颜色变化更平滑 */
}

/* 子元素获焦时的容器样式 */
.email-wrap:focus-within {
  background-color: #f0f8ff; /* 这里可以替换成你想要的颜色 */
}

补充说明 #

• :focus-within是CSS Selectors Level 4的特性，现代主流浏览器（Chrome、Firefox、Safari、Edge）都支持，若需兼容IE这类旧浏览器则无法使用，但目前绝大多数场景下都能满足需求。
• 全程不需要依赖JavaScript，完全靠CSS的伪类机制就能实现交互效果。

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