React搜索组件：CSS实现按钮仅在输入框展开/有内容时显示

先默认将按钮设置为隐藏状态，再通过两个CSS伪类组合来控制它的显示逻辑：

• 当输入框获得焦点（容器触发:focus-within状态）时显示按钮；
• 当输入框有内容时（输入框匹配:not(:placeholder-shown)伪类）显示按钮。

假设你的HTML结构如下：

<div class="search-container">
  <input class="search-input" type="text" placeholder="请输入搜索内容">
  <button class="search-btn">搜索</button>
</div>

对应的CSS实现代码：

/* 默认隐藏按钮 */
.search-btn {
  display: none;
}

/* 场景a：输入框获得焦点时，容器触发focus-within，显示按钮 */
.search-container:focus-within .search-btn {
  display: inline-block; /* 可根据布局需求改为flex/block等 */
}

/* 场景b：输入框有内容时（占位符不可见），显示同级按钮 */
.search-input:not(:placeholder-shown) + .search-btn {
  display: inline-block;
}

关键说明： #

• :focus-within会作用在容器上，只要容器内的输入框处于焦点状态，容器就会匹配该伪类，无需关心输入框是否有内容；
• :not(:placeholder-shown)是核心伪类，当输入框有内容时，占位符会被隐藏，此时该伪类生效，再通过相邻兄弟选择器+选中后续按钮实现显示；
• 如果按钮不是输入框的直接相邻兄弟，可将+替换为通用兄弟选择器~，但保持结构相邻能获得更好的性能。

你之前用:last-child效果不佳，大概率是因为按钮并非容器的最后一个子元素，导致该选择器无法匹配到按钮，改用兄弟选择器会更可靠。

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