在CSS里，::placeholder用来设置输入框占位文字的样式，而:focus表示元素获得焦点时的状态。把这两个选择器结合起来，可以在用户聚焦输入框时动态改变占位符的显示效果，增强表单的交互体验。
基本语法结构
要将::placeholder与:focus结合，需要把:focus写在前面，再通过伪元素选中占位符。常见写法如下：
input:focus::placeholder {
color: #999;
opacity: 0.6;
font-style: italic;
}
这段代码表示当输入框被聚焦时，里面的占位文字会变成灰色、半透明并且倾斜。
为什么这样写有效
浏览器在解析时，:focus先匹配到当前获得焦点的输入框，后面的::placeholder再针对该输入框的占位符生效。由于占位符本身属于输入框的影子节点，必须用伪元素才能控制。
常见应用场景
- 聚焦时隐藏占位符：把opacity设为0
- 聚焦时改变颜色提示用户正在输入
- 聚焦时缩小占位符字号做动画过渡
完整示例
下面是一个简单的HTML与CSS结合的例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
input {
padding: 8px;
border: 1px solid #ccc;
}
input:focus::placeholder {
color: #f00;
opacity: 0.4;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入姓名">
</body>
</html>
需要注意的问题
| 问题 | 说明 |
|---|---|
| 兼容性 | 旧版IE不支持::placeholder，需加前缀如:-ms-input-placeholder |
| 优先级 | 单独写的::placeholder样式可能被:focus::placeholder覆盖，注意顺序 |
合理使用:focus与::placeholder的组合，可以让表单在无脚本情况下也具有细腻的反馈效果。
CSSplaceholderfocus伪元素表单样式修改时间：2026-07-25 08:18:20