使用 ::placeholder 伪元素可以精准定位并修改输入框的提示文本样式，实现优雅定制。只需在 css 中选中目标 <input> 或 <textarea></textarea> 元素，追加 ::placeholder 选择器即可应用颜色、字体等属性。注意不同浏览器内核可能需要添加前缀以确保兼容性。
如何自定义 placeholder 的颜色和字体粗细？
通过设置 color 和 font-weight 属性可以直接改变提示词的视觉表现。以下代码展示了如何统一处理标准及 WebKit 内核浏览器的样式，确保在 Chrome、Safari 和 Firefox 中均生效。
input::placeholder {
color: #999;
font-weight: normal;
}
input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}如何隐藏特定条件下的 placeholder？
利用 CSS 属性选择器或 JavaScript 动态类名，可以在用户开始输入时隐藏提示词。虽然 :focus 伪类通常用于聚焦状态，但结合 ::placeholder-shown 伪类可以更精确地控制显示逻辑。例如，当输入框获得焦点时，可以通过 CSS 将 opacity 设为 0 来隐藏提示。
立即学习“前端免费学习笔记（深入）”；
input:focus::placeholder {
opacity: 0;
}placeholder 在 input 值为空时的具体表现是什么？
当输入框内没有用户输入的内容时，::placeholder 定义的样式会完全覆盖默认的系统样式。此时，提示词作为唯一的可见文本存在，其颜色和字体由 CSS 规则决定。一旦用户键入任意字符，提示词立即消失，无论是否保留焦点。
