Create a search box | Search bar html css – Codewithrandom
Hey, are you searching for any content where you can learn anything or watch any movie? But did you notice before that the place where you go for a search is a part of the website so it is also developed by software developers?
So, today we are going to learn to Create a search box | Search bar html css – Codewithrandom
Live Server:-
The live server of our search box is embedded below.
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
HTML Code (structure of the website):-
HTML stands for HyperText Markup Language. HTML helps to create the structure ( layout ) of the website.
Firstly use an input tag which helps us to create a search box give it a class so it will be easy while styling to select the input tag.
After the input tag, I have used a search icon which I have used from the ion-icon named website you will get documents for their tutorial on How to embed their icons on the website, you can also use some other icon portals.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
<title>Document</title></head>
<body>
<div class="main">
<input type="text" placeholder="Search" class="input" >
<a href=""><ion-icon class="search" name="search" ></ion-icon></a>
</div>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</body>
</html>
CSS Code(styling of the website):-
After writing the codes for HTML/ developing the layout now it’s time to implement its styling so it can look good. I have used some basic properties of CSS for styling like flexbox,pseudo-events(hover)
*{
margin: 0;
padding: 0;
}
body{
min-height: 100vh;
width:100%;
display:flex;
justify-content:center;
align-items:center;
background-color:royalblue;
position: relative;
}
.main{
min-height:fit-content;
width:fit-content;
display:flex;
justify-content:center;
align-items:center;
}
.search{
width:50px;
height:50px;
color:white;
}
.input{
width:0px;
height:0px;
border-radius: 15px;
border:0px;
padding:0px;
transition-duration: 0.7s;
}
a,a:hover{
background-color: blue;
width:50px;
height:50px;
border-radius:50%;
transition-duration:1s;
z-index:100;
}
.main:hover .input{
width:250px;
height:45px;
border-radius: 15px;
border:0px;
padding: 5px;
transition-duration: 0.7s;
}
