如何仅使用CSS在表单子元素获焦时修改表单背景色为lightblue

实现方案 #

你可以使用CSS原生的:focus-within伪类选择器完成需求，该选择器的匹配规则为：当前元素自身，或其任意后代元素处于聚焦状态时生效，完全不需要引入JavaScript代码。
只需要在你现有CSS样式中添加以下规则即可：

form:focus-within {
  background-color: lightblue;
}

添加完成后测试即可看到效果：点击表单内任意输入框使其获得焦点时，表单背景会自动切换为浅蓝色，输入框失焦后恢复为原有的红色背景。

内容的提问来源于stack exchange，提问作者m-naeem66622