CSS如何利用placeholder-shown判断输入状态_当占位符消失时切换css布局

:placeholder-shown伪类仅在input有placeholder属性且value为空字符串时生效，不感知空格、光标或trim后状态，且受type、readonly、浏览器兼容性等限制，需结合js同步class保障可靠性。

placeholder-shown伪类为什么有时不生效

因为 :placeholder-shown 只在输入框**有 placeholder 属性且内容为空**时才匹配，不是“占位符视觉消失”的实时监听器。一旦用户输入一个空格、按了退格删到空、甚至输入后全选粘贴覆盖，都可能意外触发或退出该状态——它只看 DOM 属性 + value 值是否为空字符串，不感知光标位置或用户意图。

• 必须写 placeholder="xxx"，仅靠 CSS ::placeholder 设置文字不行
• type="number" 或 type="email" 等表单控件在某些浏览器（如旧版 Safari）中不支持 :placeholder-shown
• 使用 value 属性强制设为空（比如 Vue/React 中 value=""）才能稳定触发；用 defaultValue 或未受控模式容易失效
• 当 input 被设为 readonly 或 disabled 时，:placeholder-shown 不会匹配

如何用:placeholder-shown切换布局（不是仅改颜色）

常见需求是“空时显示搜索图标+占位符，输入后收缩成紧凑搜索栏”，这需要配合 flex/grid 的结构变化，不能只靠 opacity 或 visibility。关键是把布局切换逻辑压进同一选择器链里，避免 JS 干预。

• 用 :placeholder-shown 控制父容器的 grid-template-columns 或 flex 子项顺序
• 慎用 display: none 切换，会导致表单焦点丢失或动画跳变；优先用 visibility: hidden; height: 0; overflow: hidden; 组合
• 如果要过渡 layout 变化，得配合 min-width/flex-basis 动画，纯 grid-template-columns 无法 transition

input:placeholder-shown + .search-icon {
  display: block;
}
input:not(:placeholder-shown) + .search-icon {
  display: none;
}

:placeholder-shown 和 :focus-within 的组合陷阱

想实现“空且聚焦时显示提示，输入后隐藏”，直接套用 input:placeholder-shown:focus 是错的——聚焦时若已输入，:placeholder-shown 已不成立，整个选择器失效。真正要的是“空 || 聚焦”逻辑，但 CSS 没有 OR 运算符。

Stable Diffusion 2.1 Demo

最新体验版 Stable Diffusion 2.1

下载

• 不要写 input:placeholder-shown:focus，它等价于“既空又聚焦”，覆盖不了“空但没聚焦”的初始态
• 更可靠的做法是：用 :placeholder-shown 处理空态样式，再用 :focus-within 在父容器上单独控制聚焦反馈（比如外边框高亮），两者职责分离
• 如果必须联动，把状态判断交给 JS，加 class 如 is-empty 或 has-input，CSS 只响应 class

兼容性与降级方案怎么写才不翻车

IE 完全不支持 :placeholder-shown，Firefox 51+、Chrome 47+、Safari 9.1+ 支持，但 Safari 对 contenteditable 或 shadow DOM 内 input 表现不稳定。

立即学习“前端免费学习笔记（深入）”；

• 用 @supports selector(:placeholder-shown) 包裹增强样式，老浏览器自动跳过
• 降级时默认按“已输入”状态设计 UI，即把 :placeholder-shown 样式当作“增强”，而非基础功能
• 别依赖它做表单验证可见性（比如空时才显示错误提示），那应该用 JS + ARIA 控制 aria-invalid 和 aria-describedby