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.....

Post a Comment

Previous Post Next Post