Step 1: Create one project folder search anywhere in your computer.
Step 2: You need to download Font Awesome so download font awesome from official site https://fontawesome.com/
Step 3: Now copy the downloaded file and extract the zip file into your search folder.
Step 4: Create new file search.html inside this search folder.
Copy and paste the following code in search.html.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/all.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Search Box using Html & CSS</title> </head> <body> <div class="search-box"> <input class="search-txt" type="text" name="" placeholder="Please search me"> <a class="search-btn" href=""><i class="fas fa-search"></i></a> </div> </body> </html>
Step 5: Create another file style.css inside search folder.
Copy and paste the following code into the style.css file.
body{
margin: 0;
padding: 0;
background: #082830;
}
.search-box{
position: absolute;;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn{
background: white;
}
.search-btn{
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items:center;
transition: 0.4s;
}
.search-txt{
border: none;
background: none;
outline: none;;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
