用 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 类，用上面的透明样式focus 时移除该类，在 blur 且值为空时再加回::placeholder 是伪元素，不支持 display 或 visibility 属性（无效）。强行写不会报错，但也不会隐藏——必须用 color、opacity 或 text-indent 等文本相关属性来实现“视觉隐藏”。
基本上就这些。核心就是：用 color: transparent + 兼容写法，别碰 display。
以上就是css想隐藏占位符默认样式怎么做_使用::placeholder伪元素重写样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
588
收藏
