Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Input Label Animation in HTML & CSS
The CSS input label animation creates a smooth floating effect where the label moves to the top border of the input field when the user focuses on or types in the input. This provides better user experience and visual feedback.
Syntax
/* Basic structure for animated label */
.input-container {
position: relative;
}
label {
position: absolute;
transition: all 0.3s ease;
pointer-events: none;
}
/* Animation trigger */
input:focus + label,
input:not(:placeholder-shown) + label {
/* Animated state styles */
}
How It Works
The animation relies on CSS positioning, transforms, and the :focus and :not(:placeholder-shown) pseudo-selectors to detect when the input is active or has content. The label smoothly transitions between its default and animated positions.
Example: Basic Input Label Animation
The following example creates a floating label that animates when the input is focused or contains text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Label Animation</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.input-container {
position: relative;
width: 250px;
}
input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
outline: none;
background: transparent;
}
input:focus {
border-color: #4a90e2;
}
label {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
color: #888;
font-size: 16px;
pointer-events: none;
transition: all 0.3s ease;
}
input:focus + label,
input:not(:placeholder-shown) + label {
top: 0;
left: 10px;
font-size: 12px;
color: #4a90e2;
background-color: #f0f0f0;
padding: 0 5px;
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" id="name" placeholder=" " required>
<label for="name">Your Name</label>
</div>
</body>
</html>
A centered input field with "Your Name" label appears. When clicked or focused, the label smoothly animates to the top border of the input field, changing color to blue and reducing in size. The label remains in the animated position when the input contains text.
Example: Multiple Animated Input Fields
Here's an example with multiple input fields using the same animation technique
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Input Label Animations</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
gap: 20px;
}
.input-container {
position: relative;
width: 300px;
}
input {
width: 100%;
padding: 15px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 8px;
outline: none;
background: white;
}
input:focus {
border-color: #007bff;
}
label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: #666;
font-size: 16px;
pointer-events: none;
transition: all 0.2s ease-in-out;
}
input:focus + label,
input:not(:placeholder-shown) + label {
top: -8px;
left: 12px;
font-size: 12px;
color: #007bff;
background-color: white;
padding: 0 5px;
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" id="fullname" placeholder=" " required>
<label for="fullname">Full Name</label>
</div>
<div class="input-container">
<input type="email" id="email" placeholder=" " required>
<label for="email">Email Address</label>
</div>
<div class="input-container">
<input type="password" id="password" placeholder=" " required>
<label for="password">Password</label>
</div>
</body>
</html>
Three input fields are displayed vertically: Full Name, Email Address, and Password. Each field has a floating label that animates to the top border when focused or when containing text. The labels change to blue color and smaller font size during animation.
Key Points
-
Empty placeholder Use
placeholder=" "to make:placeholder-shownwork correctly -
Pointer events Set
pointer-events: noneon labels to prevent interference with input clicks - Background color Give animated labels a background to cover the border line
- Smooth transitions Use CSS transitions for smooth animation effects
Conclusion
Input label animations enhance user experience by providing visual feedback and maintaining context. The technique uses CSS positioning, pseudo-selectors, and transitions to create smooth floating label effects that work across modern browsers.
Updated on: 2026-03-15T18:18:16+05:30
734 Views
Advertisements