::placeholder用于设置输入框占位符样式，结合:focus可实现聚焦时动态变化；2. 支持color、font、opacity等属性，通过transition可添加过渡效果；3. 聚焦时可降低opacity或更改颜色以弱化提示，提升用户体验；4. 需注意浏览器兼容性，建议补充-webkit-、-moz-等前缀；5. 避免使用display:none隐藏占位符，应采用opacity:0或color:transparent。
在CSS中，::placeholder 伪元素用于设置表单元素（如 input 和 textarea）中占位符文本的样式。你也可以结合 :focus 伪类，在用户聚焦到输入框时动态改变占位符的样式。这种组合常用于提升用户体验，比如在用户开始输入前提供更明显的提示。
::placeholder 基本用法
你可以通过 ::placeholder 来定义占位符的颜色、字体、透明度等样式：
::placeholder {color: #999;
font-style: italic;
opacity: 0.8;
}
:focus 结合 ::placeholder 的场景
当用户点击输入框（获得焦点）时，你可能希望占位符文字变得更浅、倾斜或直接隐藏。可以通过将 :focus 与 ::placeholder 结合实现：
input::placeholder {color: #555;
transition: opacity 0.3s ease;
}
input:focus::placeholder {
opacity: 0.5;
color: #aaa;
}
上面的例子中，当输入框获得焦点时，占位符颜色变浅、透明度降低，视觉上弱化提示文字，让用户更专注于输入内容。
立即学习“前端免费学习笔记（深入）”；
实用技巧和注意事项
- 不是所有CSS属性都能作用于 ::placeholder，常见支持的有 color、font、opacity、text-transform 等。
- 不同浏览器对 ::placeholder 的支持略有差异，建议使用标准语法，并注意兼容性。
- 如果想在聚焦时完全隐藏占位符，可设置 opacity: 0 或 color: transparent，避免使用 display:none（无效）。
- 对于需要更好兼容老版本浏览器的情况，可以加上厂商前缀，例如 ::-webkit-input-placeholder、::-moz-placeholder 等。
基本上就这些。合理使用 ::placeholder 与 :focus 的组合，能让表单交互更自然、美观。不复杂但容易忽略细节。
