当输入框有内容时显示清除按钮，核心是利用:placeholder-shown伪类失效特性，通过input:not(:placeholder-shown)+.clear-btn控制按钮显隐，配合交互优化与兼容性处理。
当输入框有内容时显示清除按钮，核心思路是利用 :placeholder-shown 伪类 —— 它只在输入框**为空且 placeholder 可见时**才匹配。也就是说，一旦用户输入内容，该伪类就失效，我们就可以据此控制清除按钮的显隐。
清除按钮一般放在 input 同一容器内，用 button 或 span 实现，推荐用 <button type="button"></button> 语义清晰、可访问性好：
<div class="search-box"> <input type="text" placeholder="搜索..."> <button type="button" class="clear-btn">✕</button> </div>
默认隐藏清除按钮；当 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 判断更轻量仅显隐还不够，加点交互更自然：
立即学习“前端免费学习笔记（深入）”；
cursor: pointer 和 hover 效果，提升可点击感知input.value = ''; input.focus();
:placeholder-shown 在现代浏览器（Chrome 47+、Firefox 47+、Safari 9.1+、Edge 79+）中支持良好。如需兼容老版本 IE，必须回退到 JS 监听 input 事件判断值长度。
基本上就这些 —— 不依赖 JS 判断内容，纯 CSS 驱动，干净又可靠。
以上就是css搜索框输入内容后想显示清除按钮怎么做_通过:placeholder-shown伪类判断内容状态的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
750
收藏
