当输入框有内容时显示清除按钮，核心是利用:placeholder-shown伪类失效特性，通过input:not(:placeholder-shown)+.clear-btn控制按钮显隐，配合交互优化与兼容性处理。
当输入框有内容时显示清除按钮，核心思路是利用 :placeholder-shown 伪类 —— 它只在输入框**为空且 placeholder 可见时**才匹配。也就是说，一旦用户输入内容，该伪类就失效，我们就可以据此控制清除按钮的显隐。
基础 HTML 结构
清除按钮一般放在 input 同一容器内，用 button 或 span 实现，推荐用 <button type="button"> 语义清晰、可访问性好：
<div class="search-box"> <input type="text" placeholder="搜索..."> <button type="button" class="clear-btn">✕</button> </div>
CSS 控制显隐逻辑
默认隐藏清除按钮；当 input 不满足 :placeholder-shown（即已有输入）时，让它显示：
.search-box .clear-btn {
display: none; /* 默认不显示 */
}
<p>.search-box input:not(:placeholder-shown) + .clear-btn {
display: inline-flex; /<em> 或 block / grid，按需调整 </em>/
}- 关键点：用
+ .clear-btn（相邻兄弟选择器），要求按钮紧接在 input 后面 -
input:not(:placeholder-shown)精准捕获“有内容”状态，比监听:focus或 JS 判断更轻量 - 注意：placeholder 必须存在且未被 JS 清空或覆盖，否则伪类不生效
补充交互与体验细节
仅显隐还不够，加点交互更自然：
立即学习“前端免费学习笔记（深入）”；
- 给清除按钮加
cursor: pointer和 hover 效果，提升可点击感知 - 点击清除后，记得用 JS 清空 value 并 focus 回输入框：
input.value = ''; input.focus(); - 移动端建议按钮最小尺寸 ≥ 44×44px，确保易点触
- 可选：配合 transition 做淡入淡出（display 不支持动画，改用 opacity + visibility）
兼容性提醒
:placeholder-shown 在现代浏览器（Chrome 47+、Firefox 47+、Safari 9.1+、Edge 79+）中支持良好。如需兼容老版本 IE，必须回退到 JS 监听 input 事件判断值长度。
基本上就这些 —— 不依赖 JS 判断内容，纯 CSS 驱动，干净又可靠。
