CSS:focus选择器跨div失效：实现输入框聚焦时显示指定元素

问题根源 #

1. .form-test 默认设置为 display: block，导致它始终处于显示状态
2. .form-group:focus+.form-test 选择器无效——form-test 不是 form-group 的相邻兄弟元素（它在 form 容器外部），相邻兄弟选择器 + 只能选中紧接在目标元素后的同级元素

修改代码实现需求 #

完整修改后的 CSS 代码

input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}

input[type=text]:focus {
  //width: 250px;
}

.form {
  padding: 2%
}

.form-group {
  background-color: orange
}

.form-groupText {
  background-color: red;
  display: none
}

.form-group:focus+.form-groupText {
  display: block;
}

/* 修改默认状态为隐藏 */
.form-test {
  background-color: purple;
  display: none;
}

/* 利用:focus-within监听容器内的聚焦状态，控制外部元素显示 */
.form:focus-within + .form-test {
  display: block;
  background-color: orange;
}

关键说明 #

• :focus-within 选择器会匹配包含聚焦元素的父容器，当 .form-group 输入框获得焦点时，它的父容器 .form 会被该选择器命中
• 通过相邻兄弟选择器 + 选中 .form 后的 .form-test，实现输入框聚焦时才显示“search for Veggies”的效果
• 原有控制“search for Fruits”的代码无需改动，因为它是正确的相邻兄弟元素匹配逻辑

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