Create a search box | Search bar html css – Codewithrandom

Create a search box | Search bar html css – Codewithrandom

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/ionicons@4.5.10-0/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/ionicons@4.5.10-0/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;
}

 

I hope you have liked it. Wait, Did you still not implement it So why are you waiting, go and implement it now 😎.
If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
You can follow me on Instagram.
Written by @Himanshu Singh.

 

Check out more…..

Leave a Reply