How To Create an Animated Search Form

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

An animated search form provides a dynamic and interactive way for users to search content on your site. By animating the appearance of the search field, you can make your website look modern and improve the user experience. In this tutorial, you'll learn how to create a simple, animated search form using HTML, CSS, and a bit of JavaScript.

Problem Statement

Create a search form that:

Starts as an icon or small element.
Expands into a full search input field when clicked.
Includes a smooth animation for both expanding and collapsing the input field.

Example:

Input: The user clicks on the search icon.
Output: The search form expands with a smooth animation.

Solution Steps

Create the Search Form Structure: Use HTML to define the search input and search button (icon).
Style the Search Form with CSS: Apply animations and transitions using CSS.
Handle Search Form Expansion with JavaScript: Use JavaScript to expand and collapse the search form when the user clicks on the search icon.

HTML, CSS, and JavaScript Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Search Form</title>
    <style>
        /* Step 1: Style the search container */
        .search-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 40px;
            transition: width 0.5s ease;
        }

        /* Step 2: Style the search input */
        .search-input {
            width: 0;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #3498db;
            border-radius: 20px;
            outline: none;
            transition: width 0.5s ease, padding 0.5s ease;
            opacity: 0;
        }

        /* Step 3: Style the search icon (button) */
        .search-button {
            position: absolute;
            right: 10px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            color: #3498db;
        }

        /* Step 4: Expanded search input */
        .search-container.expanded {
            width: 250px;
        }

        .search-container.expanded .search-input {
            width: 100%;
            padding: 10px 40px 10px 20px; /* Padding adjusted for the button */
            opacity: 1;
        }

        /* Optional: Some additional styling */
        .search-container .search-input:focus {
            border-color: #2980b9;
        }

    </style>
</head>
<body>

    <div class="search-container" id="searchContainer">
        <input type="text" class="search-input" id="searchInput" placeholder="Search...">
        <button class="search-button" id="searchButton">
            &#128269; <!-- Unicode search icon -->
        </button>
    </div>

    <script>
        // Step 5: Add JavaScript for toggling the animation
        const searchContainer = document.getElementById("searchContainer");
        const searchButton = document.getElementById("searchButton");
        const searchInput = document.getElementById("searchInput");

        // Expand and collapse the search input on button click
        searchButton.addEventListener("click", function() {
            searchContainer.classList.toggle("expanded");
            searchInput.focus(); // Automatically focus on the input when expanded
        });

        // Close the search input when clicking outside
        document.addEventListener("click", function(event) {
            if (!searchContainer.contains(event.target)) {
                searchContainer.classList.remove("expanded");
            }
        });
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Create the Search Container

The .search-container is styled with flexbox to align the input field and button. The initial width is set to 40px, making it look like a small button at first. When expanded, this container will grow smoothly.

.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px; /* Initially small width */
    transition: width 0.5s ease; /* Smooth transition for width change */
}

Step 2: Style the Search Input

The .search-input is hidden initially by setting its width to 0px and making its padding minimal. It expands when the user clicks the search button. The transition property makes the width and padding changes smooth.

.search-input {
    width: 0;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #3498db;
    border-radius: 20px; /* Rounded corners */
    outline: none;
    transition: width 0.5s ease, padding 0.5s ease;
    opacity: 0; /* Initially hidden */
}

Step 3: Style the Search Button

The search button is initially displayed as an icon (🔍), which is a Unicode character for a search icon. It is absolutely positioned to stay next to the input field. The button has a transparent background to blend in with the input field.

.search-button {
    position: absolute;
    right: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #3498db;
}

Step 4: Expanded Search Input

When the .expanded class is added to the .search-container, the width of the container expands, and the input field’s width increases, becoming fully visible.

.search-container.expanded {
    width: 250px; /* Expands the container */
}

.search-container.expanded .search-input {
    width: 100%; /* Expands the input field */
    padding: 10px 40px 10px 20px; /* Padding adjusts to fit the button */
    opacity: 1; /* Input becomes visible */
}

Step 5: JavaScript for Interaction

JavaScript is used to toggle the .expanded class on the .search-container. When the search icon (button) is clicked, the container expands, and the input field is focused. If the user clicks outside the form, the search form collapses.

const searchContainer = document.getElementById("searchContainer");
const searchButton = document.getElementById("searchButton");
const searchInput = document.getElementById("searchInput");

// Expand and collapse the search input on button click
searchButton.addEventListener("click", function() {
    searchContainer.classList.toggle("expanded");
    searchInput.focus(); // Automatically focus on the input when expanded
});

// Close the search input when clicking outside
document.addEventListener("click", function(event) {
    if (!searchContainer.contains(event.target)) {
        searchContainer.classList.remove("expanded");
    }
});

toggle("expanded"): Adds or removes the .expanded class to trigger the animation.
searchInput.focus(): Automatically focuses on the input field when it expands.
Closing when clicking outside: If the user clicks anywhere outside the form, the search field collapses.

Customization

Change Expansion Width

You can easily adjust the expanded width of the search form by modifying the .search-container.expanded rule:

.search-container.expanded {
    width: 300px; /* Wider search input */
}

Customize the Search Icon

If you prefer using an icon font such as Font Awesome, you can replace the Unicode icon with a Font Awesome icon like so:

<button class="search-button" id="searchButton">
    <i class="fas fa-search"></i>
</button>

Make sure to include the Font Awesome CDN in the <head> of your HTML file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Additional Animation Effects

You can add more animation effects such as fading or sliding by modifying the CSS transition properties. For example, to add a fading effect:

.search-input {
    transition: width 0.5s ease, opacity 0.3s ease;
}

Conclusion

This tutorial shows how to create an animated search form that expands when the user clicks on a search icon and collapses when they click outside the form. By combining CSS transitions and a little JavaScript, you can create a smooth and interactive user experience. You can further customize the appearance and behavior of the search form to match your website's design.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide