使用 :focus::placeholder 可在输入框聚焦时动态改变占位符样式，提升交互体验。示例中通过设置颜色、透明度、字体加粗及过渡动画实现视觉反馈，并需添加浏览器前缀以保证兼容性。
要在CSS中通过聚焦状态突出显示输入框的占位符（placeholder），可以结合使用 ::placeholder 伪元素和 :focus 伪类。这样可以在用户点击输入框时，动态改变占位文字的样式，提升用户体验。
基本语法与作用
::placeholder 用于选中表单元素的占位文本，而 :focus 表示该元素获得焦点（比如鼠标点击或Tab切换到输入框）。将两者结合，就能实现“聚焦时改变占位符样式”的效果。
注意： ::placeholder 是伪元素，:focus 是伪类，它们之间应使用空格或组合选择器连接，不能直接连写。常见用法示例
以下是一些实用的样式控制方式：
- 改变颜色：聚焦时让占位符更醒目或更柔和
- 调整透明度：避免占位符干扰用户输入
- 修改字体大小或粗细：视觉上强调当前操作区域
示例代码：
立即学习“前端免费学习笔记（深入）”；
input::placeholder {
color: #aaa;
font-style: italic;
transition: 0.3s ease;
}
input:focus::placeholder {
color: #007cba;
opacity: 0.8;
font-weight: bold;
}
这里设置了过渡动画（transition），使颜色变化更平滑自然。
兼容性与注意事项
虽然现代浏览器普遍支持 ::placeholder，但仍需注意：
- 旧版本浏览器如 IE 不支持此伪元素
- 不同浏览器可能需要添加前缀（如 ::-webkit-input-placeholder、::-moz-placeholder）以确保兼容
- 在实际项目中建议同时写多个前缀，或使用自动补全工具（如 Autoprefixer）
例如：
input::-webkit-input-placeholder { color: #999; }
input:-moz-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
input:focus::-webkit-input-placeholder { color: #007cba; }
input:focus:-moz-placeholder { color: #007cba; }
input:focus::-moz-placeholder { color: #007cba; }
input:focus:-ms-input-placeholder { color: #007cba; }
实际应用场景
这种技巧常用于登录表单、搜索框等需要引导用户输入的界面。当用户点击输入框，占位符颜色变深或样式变化，能清晰提示当前操作区域，增强交互反馈。
基本上就这些，不复杂但容易忽略细节。掌握好伪元素与伪类的组合方式，能让表单体验更细腻。
