当前位置：首页 > article >正文

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

article 2025/9/17 6:02:36

以下是通过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); }
}