使用::placeholder伪元素可自定义输入框占位符样式，支持color、font-size、opacity等属性，需添加-webkit-、-moz-、-ms-前缀以兼容旧浏览器，可针对input、textarea等元素单独设置样式，提升界面美观与用户体验。
使用 ::placeholder 伪元素可以轻松自定义输入框中 placeholder 文本的样式。这个伪元素作用于表单元素（如 input 和 textarea）中显示的占位提示文字。
基本语法
直接在 CSS 中使用 ::placeholder 来设置颜色、字体、透明度等样式：
input::placeholder {
color: #999;
font-style: italic;
opacity: 1; /* 防止某些浏览器降低透明度 */
}
支持的常用样式属性
你可以修改以下常见样式来提升用户体验或匹配设计风格：
- color：改变提示文字颜色
- font-size：调整字号
- font-style：设置斜体等字体样式
- font-weight：加粗或变细文字
- text-transform：控制大小写转换
- opacity：调整透明度（注意默认可能较淡）
浏览器兼容性处理
虽然现代浏览器普遍支持 ::placeholder，但为了兼容旧版本，建议添加带前缀的写法：
立即学习“前端免费学习笔记（深入）”；
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input::-ms-input-placeholder { color: #999; }
input::placeholder { color: #999; }
其中：
- -webkit- 适用于 Chrome、Safari 和新版 Edge
- -moz- 用于 Firefox
- -ms- 针对旧版 IE/Edge
针对不同输入框分别设置
你也可以为特定输入框单独设置样式，比如搜索框或密码框：
.search-input::placeholder {
color: #ccc;
font-size: 14px;
}
textarea::placeholder {
color: #666;
line-height: 1.5;
}
基本上就这些。合理使用 ::placeholder 能让界面更美观清晰，注意保持可读性，避免颜色对比太弱导致用户看不清提示内容。
