input:not(:placeholder-shown) 是显示清空按钮的唯一可靠 css 条件，需配合 placeholder 属性、手动触发 input 事件、opacity/visibility 动画及老浏览器 js 回退方案。
input:not(:placeholder-shown) 是显示清空按钮的唯一可靠 CSS 条件
只要输入框 value 经过 trim() 后不为空，:placeholder-shown 就失效，input:not(:placeholder-shown) 就能精准匹配“有内容”状态。它比监听 :focus 或用 :valid 更直接——后者依赖校验规则，而清空按钮只关心“有没有输”，不关心对不对。
常见错误是写成 input:focus:not(:placeholder-shown)：用户聚焦但还没敲字时，这个选择器不成立；而用户已输入后失焦，它又成立——按钮闪现逻辑错乱。正确做法就是无条件用 input:not(:placeholder-shown)。
- 必须确保
<input>带placeholder属性（哪怕只是placeholder=" "），否则 Chrome/Firefox 完全不触发该伪类 -
type="number"或type="date"在清空后 value 可能为""，但 placeholder 不显示 → 伪类不匹配，此时需 JS 回退 - 清除按钮必须紧跟在
<input>后面，才能用相邻兄弟选择器+，例如：input:not(:placeholder-shown) + .clear-btn
清除按钮点击后 input.value 被清空，但 :placeholder-shown 没恢复
这是最常被忽略的坑：JS 执行 input.value = '' 后，浏览器未必立刻重绘 :placeholder-shown 状态，尤其在 React/Vue 中，DOM 更新可能滞后，或框架劫持了 value 同步逻辑。
真正生效的操作是：
- 手动调用
input.dispatchEvent(new Event('input', { bubbles: true }))，强制触发 input 事件，让浏览器重新评估 placeholder 显示状态 - 避免只设
input.value = ' '（一个空格）——trim()后虽为空，但 DOM value 不是""，:placeholder-shown仍不匹配 - 移动端注意：清除按钮点击后要立即
input.focus()，否则软键盘可能收起，用户无法继续输入
用 opacity + visibility 替代 display 实现淡入淡出动画
display 属性无法参与 CSS transition，所以直接写 display: none → block 会生硬闪现。想加过渡效果，得换策略：
- 默认设
.clear-btn { opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s - 激活时用
input:not(:placeholder-shown) + .clear-btn { opacity: 1; visibility: visible; } - 不要用
transition: all——visibility的过渡不可控，必须显式列出 - 按钮尺寸建议 ≥ 44×44px（尤其移动端），并加
cursor: pointer和 hover 变色，明确可点击信号
Safari 15.4 之前和 IE 需要 JS 回退
:placeholder-shown 在 Safari 15.4+ 才完整支持，旧版 Safari 和所有 IE 版本完全不识别。不能只靠 CSS，得准备降级方案：
- 检测支持性：
const supportsPlaceholderShown = CSS.supports('selector', 'input:placeholder-shown') - 不支持时，监听
input和change事件，根据input.value.trim().length动态增删has-contentclass - 回退 CSS 写成
.has-content + .clear-btn，与纯 CSS 方案保持选择器结构一致，减少样式重复 - 注意粘贴场景：
paste事件后需setTimeout(() => { /* check value */ }, 0)，因为粘贴值在事件回调中尚未同步到 DOM
真正难的不是写对那行 input:not(:placeholder-shown) + .clear-btn，而是处理 value 被 JS 清空后浏览器状态没及时更新、空格字符干扰判断、以及老浏览器里如何让同一套交互逻辑不崩。这些点不提前踩一遍，上线后清空按钮就容易“点了没反应”或“删光了还挂着”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
