HTML中如何使用::placeholder伪元素美化占位文字-html教程-PHP中文网

::placeholder需兼容各浏览器前缀且仅支持有限样式，focus时隐藏需用opacity过渡，contenteditable不支持该伪元素，应避免过度美化影响可访问性。

html中如何使用::placeholder伪元素美化占位文字

为什么直接写 `::placeholder` 有时不生效

因为浏览器引擎前缀还没统一，::placeholder 是标准写法，但 Chrome/Safari（WebKit）、Firefox（Gecko）、Edge（旧 Trident/EdgeHTML）各自实现不同。只写一个规则，大概率在某个浏览器里完全没效果。

常见错误现象：::placeholder { color: #666; } 在 Firefox 里不生效，Chrome 里正常；或者移动端 Safari 忽略整个规则。

必须同时覆盖 ::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder
::-moz-placeholder 和 :placeholder-shown 不是同一机制，别混用
IE 10–11 只认 :-ms-input-placeholder，且不支持双冒号写法（得用单冒号）
伪元素选择器优先级低，如果父级有 !important 的 color，它会被覆盖

`::placeholder` 能设哪些样式，哪些不能设

能设的：颜色（color）、字体（font-size/font-family）、透明度（opacity）、文字装饰（text-decoration）、行高（line-height，部分浏览器支持）

不能设的：display、visibility、height/width、background（部分旧版 Firefox 不支持）、padding 或 margin（会破坏输入框盒模型，且无意义）

opacity 比 color 更安全——避免深色主题下 placeholder 发灰看不清
不要给 ::placeholder 加 background，它不会渲染在 input 底层，而是叠在文字上，易导致闪烁或裁剪
移动端 iOS Safari 对 font-size 缩放敏感，建议用 rem 或 em，别用固定 px

如何让 placeholder 在 focus 后立即消失，而不是等输入才消失

原生 placeholder 是“空值 + 未聚焦”时才显示，focus 本身不会隐藏它；只有用户开始输入或脚本修改了 value 才触发隐藏。想让它 focus 就消失，得靠 CSS 配合 :focus 状态强制隐藏。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

用 input:focus::placeholder { opacity: 0; transition: opacity 0.15s; }
别用 display: none —— 它会导致重排，且部分浏览器不支持
加 transition 防止突兀消失，但别超过 0.2s，否则用户可能看到残留
注意：这个技巧对同样有效，但需单独写 textarea:focus::placeholder

contenteditable 元素怎么套用 `::placeholder`

不能。所有浏览器都不支持给 contenteditable="true" 的

 或  使用 ::placeholder —— 它根本不是这些元素的合法伪元素目标。
试图写 div[contenteditable]::placeholder，开发者工具里能看到规则，但计算样式中永远为空。

必须用 JS + CSS 模拟：加一个 data-placeholder 属性，再用 ::before + content: attr(data-placeholder)

JS 要监听 input 和 focus/blur，用 innerText.trim() === '' 判断是否为空（别用 textContent，它会把 <br>
 当内容）
移动端 focus 时机不稳定，建议用 setTimeout(() => {...}, 30) 延迟检测，避免 placeholder 闪一下又出来

真正容易被忽略的是：placeholder 不是视觉装饰层，它是语义化输入提示。过度美化（比如加 icon、多行、动画）反而损害可访问性——屏幕阅读器不会读取伪元素内容，也不会播报你用 data- + ::before 模拟的“占位符”。该简则简。