CSS3实现的账号密码输入框提示效果

以下是通过CSS3实现输入框提示效果的常用方法，包含浮动标签和动态提示两种经典实现方案：

一、浮动标签效果

<div class="input-group"><input type="text" required><label>用户名</label>
</div><style>
.input-group {position: relative;margin: 20px;
}input {width: 100%;padding: 10px;border: 2px solid #ccc;border-radius: 4px;transition: border-color 0.3s;
}input:focus {outline: none;border-color: #2196F3;
}label {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);color: #999;pointer-events: none;transition: 0.3s;
}input:focus + label,
input:valid + label {top: -10px;left: 5px;font-size: 12px;color: #2196F3;background: white;padding: 0 5px;
}
</style>

二、动态提示效果

<input type="password" placeholder=" "> <!-- 留空占位符 -->
<div class="hint">请输入6-20位字符</div><style>
input {width: 100%;padding: 12px;border: 1px solid #ddd;transition: 0.3s;
}input:focus {border-color: #4CAF50;box-shadow: 0 0 8px rgba(76,175,80,0.3);
}/* 自定义占位符效果 */
input::placeholder {color: transparent;
}.hint {position: absolute;opacity: 0;transform: translateY(10px);transition: 0.3s;color: #666;font-size: 12px;
}input:focus ~ .hint {opacity: 1;transform: translateY(5px);
}
</style>

三、验证状态反馈

/* 有效状态 */
input:valid {border-color: #4CAF50;
}/* 无效状态 */
input:invalid {border-color: #f44336;animation: shake 0.3s;
}@keyframes shake {0%, 100% { transform: translateX(0); }25% { transform: translateX(5px); }75% { transform: translateX(-5px); }
}

关键实现原理：

1. 使用:focus伪类控制聚焦状态样式
2. 通过transition实现平滑动画过渡
3. 利用相邻兄弟选择器(+)和通用兄弟选择器(~)关联提示元素
4. :valid和:invalid伪类实现自动验证反馈
5. 绝对定位实现标签位置变换
6. 透明占位符配合自定义提示布局

这些方案无需JavaScript即可实现动态交互效果，具有以下优势：

• 提升表单可用性
• 增强视觉引导
• 即时反馈输入状态
• 减少页面跳跃感
• 兼容现代浏览器（需加前缀适配旧版）