用 color: transparent 实现占位符视觉隐藏，需配合 ::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder 等兼容写法，禁用 display: none 或 visibility: hidden。
想隐藏或自定义输入框的占位符（placeholder）样式，直接用 ::placeholder 伪元素设置即可。默认情况下它有浅灰色、小号字体等浏览器内置样式，要“隐藏”它，本质是让文字不可见——不是删掉占位符内容，而是视觉上透明或颜色与背景一致。
让占位符完全不可见
最常用的方式是把文字颜色设为透明，或和 input 背景色一致：
input::placeholder {
color: transparent;
/* 或者：color: #fff; （如果 input 背景是白色） */
/* 可选：避免残留光标，加一句 */
opacity: 0;
}兼容不同浏览器的写法
虽然现代浏览器基本支持 ::placeholder，但旧版 Chrome/Safari/Edge 曾用单冒号 :placeholder-shown 或带前缀的写法。实际项目中建议加上主流前缀以保兼容：
input::-webkit-input-placeholder { color: transparent; }
input::-moz-placeholder { color: transparent; opacity: 1; }
input:-ms-input-placeholder { color: transparent; }
input::placeholder { color: transparent; }注意：::-moz-placeholder 需额外设 opacity: 1，因为 Firefox 默认会降低不透明度，设 transparent 时可能仍微显灰影。
立即学习“前端免费学习笔记（深入）”；
隐藏的同时保留交互提示（进阶）
如果只是想“视觉隐藏”，但又希望用户聚焦时能临时看到提示（比如用 JS 控制），可以结合类名动态切换：
- 默认状态加
.hide-placeholder类，用上面的透明样式 - JS 在
focus时移除该类，在blur且值为空时再加回 - 这样既保持界面简洁，又不丢失可用性
慎用 display: none 或 visibility: hidden
::placeholder 是伪元素，不支持 display 或 visibility 属性（无效）。强行写不会报错，但也不会隐藏——必须用 color、opacity 或 text-indent 等文本相关属性来实现“视觉隐藏”。
基本上就这些。核心就是：用 color: transparent + 兼容写法，别碰 display。
