用 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 时可能仍微显灰影。

QoQo是一款专注于UX设计的AI工具，可以帮助UX设计师生成用户角色卡片、用户旅程图、用户访谈问卷等。

隐藏的同时保留交互提示（进阶）

如果只是想“视觉隐藏”，但又希望用户聚焦时能临时看到提示（比如用 JS 控制），可以结合类名动态切换：

• 默认状态加 .hide-placeholder 类，用上面的透明样式
• JS 在 focus 时移除该类，在 blur 且值为空时再加回
• 这样既保持界面简洁，又不丢失可用性

慎用 display: none 或 visibility: hidden

::placeholder 是伪元素，不支持 display 或 visibility 属性（无效）。强行写不会报错，但也不会隐藏——必须用 color、opacity 或 text-indent 等文本相关属性来实现“视觉隐藏”。

基本上就这些。核心就是：用 color: transparent + 兼容写法，别碰 display。

以上就是css想隐藏占位符默认样式怎么做_使用::placeholder伪元素重写样式的详细内容，更多请关注其它相关文章！

# css  # js  # 伪元素  # 浏览器  # edge  # safari  # 重写  # 怎么做  # 明度  # 进阶  # 两种类型  # 选择器  # 一句  # 设为  # 可用性  # 相关文章  # 太原seo优化咨询  # 刷手机网站优化详情  # 鱼洞企业网站推广  # 免费seo流量宝  # 酒店seo关键词 实例  # 廊坊营销网站推广业务  # 微信营销推广软件有哪些  # 黄州seo资质  # 柳城可靠的网站建设策略  # 营销推广选火21星