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
How to create an animated search form with CSS?
A lot of websites these days have an animated search box on the home page itself. On placing the mouse cursor within the search box, the search box width increases to make it easier for users to search. Let us see how to create such animated search form with HTML and CSS.
Syntax
input[type=text] {
width: initial-width;
transition: width duration timing-function;
}
input[type=text]:focus {
width: expanded-width;
}
Method 1: Basic Width Animation
First, create the search form using the <form> element and place the input type text in it. Do not forget to mention an apt placeholder for the users to understand the purpose of the textbox ?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
form {
margin: 20px 0;
}
input[type=text] {
width: 170px;
font-size: 16px;
background-color: white;
border: 2px solid #ddd;
border-radius: 25px;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
outline: none;
}
input[type=text]:focus {
width: 100%;
border-color: #4CAF50;
}
</style>
</head>
<body>
<h2>Animated Search Form Example</h2>
<form>
Search: <input type="text" name="search" placeholder="Search Here...">
</form>
</body>
</html>
A search form with a text input that starts at 170px width. When clicked or focused, it smoothly expands to 100% width with a green border, creating a smooth animation effect.
Method 2: Enhanced Search Box with Icon
You can enhance the search box by adding a search icon and more sophisticated styling ?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.search-container {
position: relative;
max-width: 600px;
margin: 20px auto;
}
.search-box {
width: 200px;
height: 45px;
border: 3px solid #00B4CC;
border-radius: 25px;
padding: 0 20px 0 45px;
font-size: 16px;
background-color: white;
transition: width 0.5s ease-in-out;
outline: none;
}
.search-box:focus {
width: 400px;
}
.search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
pointer-events: none;
}
</style>
</head>
<body>
<h2>Enhanced Animated Search</h2>
<div class="search-container">
<span class="search-icon">?</span>
<input type="text" class="search-box" placeholder="Type to search...">
</div>
</body>
</html>
A more polished search box with a search icon that starts at 200px width and smoothly expands to 400px when focused. The search icon remains in position during the animation.
Key Properties
| Property | Purpose |
|---|---|
transition |
Creates smooth animation between states |
:focus |
Targets the element when it receives focus |
width |
Property being animated from initial to expanded state |
ease-in-out |
Timing function for smooth start and end |
Conclusion
Creating an animated search form involves using CSS transitions on the width property and the :focus selector. The transition property ensures smooth animation, while :focus triggers the expansion when users click on the search box.
357 Views
