How to Create an Animated Search Box using HTML and CSS ?
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:
Please Login to comment...