css输入框占位文字样式怎么改_使用css::placeholder伪元素

可通过::placeholder伪元素修改输入框占位文字样式，需添加浏览器前缀确保兼容，其仅在空且未聚焦时显示，支持color、font-size等文本属性，不支持盒模型属性。

可以通过 ::placeholder 伪元素来修改输入框（ 或 ）中占位文字（placeholder）的样式，比如颜色、字体大小、透明度等。

基础用法：设置颜色和字体

最常用的是改变占位文字颜色，避免与背景色冲突或提升可读性：

input::placeholder {
  color: #999;
  font-size: 14px;
  font-style: italic;
}

兼容不同浏览器的写法

由于历史原因，各浏览器前缀略有差异，建议加上主流前缀确保兼容性：

input::placeholder {
  color: #666;
}
input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
  color: #666;
}
input::-moz-placeholder {          /* Firefox 19+ */
  color: #666;
  opacity: 1; /* Firefox 默认会降低透明度，需重置 */
}
input:-ms-input-placeholder {      /* IE 10-11 */
  color: #666;
}
input::-ms-input-placeholder {     /* Edge */
  color: #666;
}

注意 placeholder 的显示逻辑

占位文字只在输入框为空且未获得焦点时显示；一旦用户开始输入或输入框获得焦点，它就会隐藏。因此不能用 :focus::placeholder 控制聚焦时的样式——它不会生效。如需聚焦时隐藏 placeholder，可用 JS 清空或用 CSS 隐藏：

• 聚焦时让 placeholder 不显示（视觉上）：input:focus::placeholder { color: transparent; }
• 但更推荐保持语义清晰，不强行隐藏，除非有明确交互需求

支持的 CSS 属性有限

::placeholder 支持的样式较基础，常见可用属性包括：

• color（最常用）
• font-size / font-family / font-weight
• opacity（注意 Firefox 默认为 0.53，常需设为 1）
• text-transform、letter-spacing 等文本相关属性
• 不支持 background、padding、border 等盒模型属性