聚焦时将display从hidden改为block无效问题排查

你的问题出在CSS选择器使用错误：

原代码里的.searchbarinput:focus .searchbardropdown是后代选择器，它只会匹配.searchbarinput聚焦状态下的子元素中的.searchbardropdown，但从HTML结构来看，.searchbardropdown是.searchbarinput的兄弟元素（两者平级，都在.searchbarcontainer容器内），所以这个选择器无法定位到下拉框元素，导致聚焦时下拉框不显示。而.searchbarinput:focus能正常生效是因为它直接选中了input元素本身，所以背景色会变红。

修改后的CSS代码 #

.searchbardropdown{
  display: none;
}
/* 使用通用兄弟选择器 ~ 匹配input聚焦后的同级兄弟元素dropdown */
.searchbarinput:focus ~ .searchbardropdown{
  display: block;
}
.searchbarinput:focus{
  background-color: red;
}

选择器说明 #

• ~ 是通用兄弟选择器，会匹配所有在目标元素之后的同级兄弟元素，完全适配当前HTML结构（.searchbardropdown在.searchbarinput之后且同级）。
• 如果后续调整HTML结构让.searchbardropdown紧挨着.searchbarinput，也可以改用相邻兄弟选择器+，不过当前结构下~更稳妥。

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