HTML文本框input标签placeholder属性使用教程-html教程-PHP中文网

placeholder仅对text、search、tel、url、email、password、number和textarea有效，不支持date、checkbox、radio、file、select、hidden等；它不是默认值，不能替代label，也不参与提交，仅为空值时显示灰色提示。

html文本框input标签placeholder属性使用教程

placeholder 不是默认值，不能替代 label，也不参与提交；它只在空值时显示灰色提示，且仅对特定 input 类型和 textarea 有效。

哪些 input type 支持 placeholder

只有以下类型原生支持：text、search、tel、url、email、password、number 和 textarea。其他如 date、checkbox、radio、file、select、hidden 均不支持——加了也无效，浏览器直接忽略。

常见误用包括：

给 <select></select> 写 placeholder="请选择" → 应改用一个 disabled 的空 <option></option>
在自定义组件或 <div> 上加 <code>placeholder 属性 → 完全无渲染效果，也不是合法 HTML
用 type="number" 时发现 placeholder 不显示 → 某些旧版 Chrome/Safari 会忽略，建议降级为 type="text" 并配合 inputmode="numeric" 和前端校验

为什么 placeholder 颜色/字体改不了

因为 ::placeholder 是伪元素，不是普通文本继承样式。直接写 input { color: #333 } 对它完全没用。

必须显式声明各浏览器前缀，且顺序很重要：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

input::-webkit-input-placeholder（Chrome/Safari/Edge）
input::-moz-placeholder（Firefox，注意默认 opacity: 0.53，不设 opacity: 1 会发灰）
input:-ms-input-placeholder（IE 10–11，已废弃但仍有存量）
input::placeholder（现代标准，放最后，避免被前面规则覆盖）

另外：::placeholder 只支持 color、font-size、opacity、font-style 等文本类样式；padding、background、border 写了也静默忽略。

React/Vue 中 placeholder 动态更新失效

框架绑定本身没问题，但容易因初始值或响应链断裂导致残留或卡住：

React 中若 placeholder={text} 的 text 初始为 null 或 undefined，React 18 严格模式可能跳过 DOM 属性设置 → 改用 placeholder={text ?? ""}
Vue 中若 :placeholder="computedText" 的 computedText 未正确定义为 computed，或依赖未触发更新 → 检查是否漏了 watch 或 ref 依赖追踪
统一原则：确保传入值始终是字符串类型，避免 null/undefined 直接透传
调试时别只看 JS 变量，要打开 DevTools 查看真实 DOM 元素上是否存在 placeholder 属性

placeholder 被截断、模糊或不显示的典型原因

这些不是 bug，而是 CSS 与浏览器渲染机制共同作用的结果：

input { font-size: 0; } 或 line-height: 0; → placeholder 文字被压扁甚至消失
父容器宽度太小 + 未设 white-space: nowrap → 中文 placeholder 在 iOS Safari 上可能自动缩放导致模糊
用了 appearance: none; 却没补全各内核前缀 → 某些 Safari 版本下 placeholder 不渲染
input::placeholder { color: transparent; } 忘记重置 → 提示变成“隐形”，用户根本看不到
表单重置后 placeholder 没恢复 → 实际是 JS 清空了 value，而 placeholder 本身只由 HTML 属性控制，不受 form.reset() 影响