使用::placeholder伪元素可自定义输入框提示文字样式，支持颜色、字体、透明度等设置，并需添加浏览器前缀以增强兼容性，通过opacity:1避免默认半透明导致的显示过淡或闪烁问题，还可结合类名或属性选择器对特定输入框进行个性化定制，提升表单视觉效果和用户体验。
在CSS中设置输入框的占位符（placeholder）样式，可以通过 ::placeholder 伪元素选择器实现。这个选择器允许你自定义 input 或 textarea 中提示文字的颜色、字体、透明度等外观属性。
使用 ::placeholder 选择器
直接在CSS中为目标输入框添加 ::placeholder 伪元素规则即可修改提示文字样式：
input::placeholder {
color: #999;
font-style: italic;
opacity: 1; /* 避免部分浏览器降低透明度 */
}
上述代码会将所有 input 元素的占位符文字设为灰色斜体，并确保完全不透明。
兼容不同浏览器
由于早期浏览器对 placeholder 样式的支持使用了带前缀的伪元素，为了更好的兼容性，建议加上厂商前缀：
立即学习“前端免费学习笔记（深入）”；
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #999;
font-style: italic;
}
input::-moz-placeholder { / Firefox 19+ /
color: #999;
font-style: italic;
}
input:-ms-input-placeholder { / IE 10+ /
color: #999;
font-style: italic;
}
input::placeholder { / 标准语法 /
color: #999;
font-style: italic;
}
虽然现代浏览器已普遍支持标准语法，但在维护老项目或需支持旧版本时，保留前缀更稳妥。
控制透明度和避免闪烁
某些浏览器默认给 placeholder 添加了半透明效果（通过 opacity 实现），这可能导致文字过淡看不清。可以显式设置 opacity: 1 来保持颜色清晰：
textarea::placeholder {
color: #666;
opacity: 1;
font-size: 14px;
}
同时，若用户输入内容后删除，有些情况下 placeholder 重新显示时会出现闪烁，统一设置 opacity 可减少这类视觉问题。
针对特定输入框定制样式
你可以结合类名或属性选择器，只为特定输入框设置 placeholder 样式：
input.search-input::placeholder {
color: #ccc;
font-weight: 300;
}
input[placeholder="请输入姓名"]::placeholder {
color: red;
}
这样可以实现更精细的控制，比如搜索框提示文字轻柔些，必填项错误提示用红色强调。
基本上就这些。使用 ::placeholder 能有效提升表单体验，让提示信息更清晰美观。注意测试多浏览器表现，确保样式一致。
