Active input 表单显示标签通常指的是在用户输入时,标签(label)能够动态地改变其显示状态,例如从静态文本变为浮动提示,以提高用户体验。纯 CSS 解决方案意味着不使用 JavaScript 或其他脚本语言,仅通过 CSS 的特性来实现这一效果。
以下是一个使用纯 CSS 实现浮动标签效果的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Input Form</title>
<style>
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
.form-label {
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: all 0.2s ease-in-out;
}
.form-control:focus + .form-label,
.form-control:not(:placeholder-shown) + .form-label {
font-size: 0.8rem;
top: -10px;
color: #007bff;
}
.form-control {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder=" ">
<label for="username" class="form-label">Username</label>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder=" ">
<label for="email" class="form-label">Email</label>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
.form-control
)和标签(.form-label
)在同一个 .form-group
容器内。:focus
和 :not(:placeholder-shown)
伪类。.form-label
的 left
和 top
属性,确保标签初始位置正确。transition
属性平滑过渡标签位置变化。通过以上方法,你可以实现一个纯 CSS 的 active input 表单显示标签效果,并解决常见的实现问题。
领取专属 10元无门槛券
手把手带您无忧上云