How to Create an Animated Search Box using HTML and CSS ? Last Updated : 27 Jan, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report The task is to create an Animated Search Box using HTML and CSS. The search bar is one of the most important components of the website. Basically, it is used for connecting people with websites. In the face of complicated web content, users express their needs by searching keywords, expecting to obtain accurate information and quick result. Approach: Step 1: Here we used an input element in the HTML section. <input type="text" name="search" placeholder="Search anything here .."> Step2: Add CSS code to make it attractive. input[type=text] { width: 150px; box-sizing: border-box; border: 4px solid green border-radius: 6px; font-size: 26px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.3s ease-in-out; } input[type=text]:hover { width: 90%; } Example: HTML <!DOCTYPE html> <html> <head> <style> h1 { color: green; } input[type=text] { width: 150px; box-sizing: border-box; border: 4px solid green; border-radius: 6px; font-size: 26px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.3s ease-in-out; } input[type=text]:hover { width: 90%; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> Create an Animated Search Box using HTML and CSS </h2> <form> <input type="text" name="search" placeholder="Search.."> </form> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create gradient search button using HTML and CSS ? M manaschhabra2 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Create a Search Bar using HTML and CSS Creating a search bar in HTML and CSS is simple and essential for enhancing user experience on your website. A search bar allows users to quickly find specific content, making it a common feature in website navigation menus. In this guide, we'll show you how to create a search bar in HTML. By follow 3 min read How to create animated banner links using HTML and CSS? Links are one of the most important parts of any component that is used in website making. Almost every component had some form of links in it. A common example is a menu/nav-bar. All we see is some button like home, about, etc. but under the hood they all are links. Sometimes there comes a situatio 2 min read How to Create Text Color Animation using HTML and CSS ? The text color can be changed according to the programmer’s choice using CSS @keyframes rule. In this article, we will see how to create text color animation using HTML and CSS. Preview:Approach:Create an HTML file with a centered <div> containing an <h2> element.Use CSS to reset default 1 min read How to create a progress bar animation using HTML and CSS ? In this mini Web Development project we will utilize CSS animations and create a progress bar using them. The progress bar will start from zero and go to a certain extent as we want. The progress bar is basically showing the expertise of a programmer in different languages in animated form. Prerequi 3 min read How to create gradient search button using HTML and CSS ? In this article, we will see how to create a gradient search button using HTML & CSS, along with knowing its basic implementation through the examples. The creation of a gradient search button involves the CSS linear-gradient() function, which sets the background color of the button. Here, we ha 4 min read How to Create Typewriter Animation using HTML and CSS ? A typewriter animation simulates the appearance of text being typed out letter by letter, using only HTML and CSS. This effect is a simple yet eye-catching way to bring dynamic text to life on a website, capturing attention without the need for JavaScript. It's a great technique to make key text ele 6 min read Like